hightouch UI

Button Group

A button group is a combination of multiple buttons related to each other.

#

import { ButtonGroup, Button } from "@hightouchio/ui";

<ButtonGroup>
<Button>Cancel</Button>
<Button variant="primary">Save</Button>
</ButtonGroup>;

#

The size determines the spacing between the buttons.

#

The default small size has a gap of 8px and should be used for sister buttons (save/cancel, next/back, undo/redo).

<ButtonGroup size="sm">
<Button variant="primary">Save</Button>
<Button>Cancel</Button>
</ButtonGroup>

#

The large size has a gap of 16px and should be used for neighbor buttons (a row of buttons in the top right of the page).

import {
IconButton,
Menu,
MenuActionsButton,
MenuList,
MenuDivider,
MenuItem,
PublishIcon,
CopyIcon,
EditIcon,
DeleteIcon,
} from "@hightouchio/ui";

<ButtonGroup size="lg">
<Button>Add sync</Button>
<IconButton aria-label="Deploy sync" variant="secondary" icon={PublishIcon} />
<Menu>
<MenuActionsButton variant="secondary" />

<MenuList>
<MenuItem icon={CopyIcon}>Duplicate</MenuItem>
<MenuItem icon={EditIcon}>Edit labels</MenuItem>
<MenuDivider />
<MenuItem icon={DeleteIcon} variant="danger">
Delete
</MenuItem>
</MenuList>
</Menu>
</ButtonGroup>;

#

#

Use left alignment in forms or other page content. This should be a default choice in most cases. Primary button is positioned first and secondary buttons are last.

<ButtonGroup>
<Button variant="primary">Save</Button>
<Button>Cancel</Button>
</ButtonGroup>

#

Use center alignment in empty or error states. Primary button is positioned first and secondary buttons are last. Try to use no more than two buttons when button group is aligned to center.

<ButtonGroup>
<Button variant="primary">Save</Button>
<Button>Cancel</Button>
</ButtonGroup>

#

Use right alignment in dialogs, wizards and toolbars. Secondary buttons are positioned first and primary buttons are last.

<ButtonGroup>
<Button>Cancel</Button>
<Button variant="primary">Save</Button>
</ButtonGroup>

#

#

  • When there are at least two buttons positioned near each other.

#

  • When there's only one button in a group.

#

  • Only buttons are acceptable as children to this component.

#

Inherits margin props.

NameDefaultDescription
size"sm""sm" | "lg"

The size determines the spacing between the buttons.

children

—

ReactNode

Buttons.

On this page