Button Group
Joins outline buttons / icon buttons into a segmented control. Horizontal or vertical.
<ButtonGroup>
<Button variant="outline">Day</Button>
<Button variant="outline">Week</Button>
<Button variant="outline">Month</Button>
</ButtonGroup><ButtonGroup>
<IconButton
icon={faBars}
aria-label="List view"
/>
<IconButton
icon={faTableColumns}
aria-label="Grid view"
/>
<IconButton
icon={faCalendar}
aria-label="Calendar view"
/>
</ButtonGroup><ButtonGroup>
<Button variant="outline">Label</Button>
<IconButton
icon={faFilter}
aria-label="Filter"
/>
</ButtonGroup><ButtonGroup orientation="vertical">
<IconButton
icon={faChevronUp}
aria-label="Increase"
/>
<IconButton
icon={faChevronDown}
aria-label="Decrease"
/>
</ButtonGroup><ButtonGroup>
<Button variant="outline" size="sm">Day</Button>
<Button variant="outline" size="sm">
Week
</Button>
<Button variant="outline" size="sm">
Month
</Button>
</ButtonGroup><ButtonGroup orientation="vertical">
<IconButton
icon={faChevronUp}
size="sm"
aria-label="Increase"
/>
<IconButton
icon={faChevronDown}
size="sm"
aria-label="Decrease"
/>
</ButtonGroup>orientation:"horizontal" | "vertical"= "horizontal"Lay children in a row or column.
children:ReactNodeOutline Buttons or IconButtons to join.