Actions
Button Group
Related buttons joined into one horizontal or vertical group, with optional separators and a split menu.
| Class name | Type | Description |
|---|---|---|
joinplf:join | Component | Joins the join-item children into one control |
join-itemplf:join-item | Part | A joined item; only the outer corners stay round |
join-separatorplf:join-separator | Part | A line between filled items |
join-verticalplf:join-vertical | Direction | Stacks the items at equal width |
<div class="join" role="group" aria-label="Basic example">
<button class="btn btn-outline join-item">Left</button>
<button class="btn btn-outline join-item">Middle</button>
<button class="btn btn-outline join-item">Right</button>
</div><div class="plf:join" role="group" aria-label="Basic example">
<button class="plf:btn plf:btn-outline plf:join-item">Left</button>
<button class="plf:btn plf:btn-outline plf:join-item">Middle</button>
<button class="plf:btn plf:btn-outline plf:join-item">Right</button>
</div>import { Button, ButtonGroup } from '@pelatform/react';
export function Example() {
return (
<ButtonGroup aria-label="Basic example">
<Button variant="outline">Left</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>
);
}import { Button, ButtonGroup } from '@pelatform/react/prefixed';
export function Example() {
return (
<ButtonGroup aria-label="Basic example">
<Button variant="outline">Left</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>
);
}Name the group with aria-label or aria-labelledby. Only direct children with join-item are joined.
Separator
Set --plf-button-group-separator-color to a color that shows against the fill.
<div class="join" role="group" aria-label="Separator example" style="--plf-button-group-separator-color: var(--plf-color-primary-hover)">
<button class="btn btn-primary join-item">Copy</button>
<span class="join-separator"></span>
<button class="btn btn-primary join-item">Paste</button>
</div><div class="plf:join" role="group" aria-label="Separator example" style="--plf-button-group-separator-color: var(--plf-color-primary-hover)">
<button class="plf:btn plf:btn-primary plf:join-item">Copy</button>
<span class="plf:join-separator"></span>
<button class="plf:btn plf:btn-primary plf:join-item">Paste</button>
</div>import type { CSSProperties } from 'react';
import { Button, ButtonGroup, ButtonGroupSeparator } from '@pelatform/react';
export function Example() {
return (
<ButtonGroup
aria-label="Separator example"
style={{ '--plf-button-group-separator-color': 'var(--plf-color-primary-hover)' } as CSSProperties}
>
<Button color="primary">Copy</Button>
<ButtonGroupSeparator />
<Button color="primary">Paste</Button>
</ButtonGroup>
);
}import type { CSSProperties } from 'react';
import { Button, ButtonGroup, ButtonGroupSeparator } from '@pelatform/react/prefixed';
export function Example() {
return (
<ButtonGroup
aria-label="Separator example"
style={{ '--plf-button-group-separator-color': 'var(--plf-color-primary-hover)' } as CSSProperties}
>
<Button color="primary">Copy</Button>
<ButtonGroupSeparator />
<Button color="primary">Paste</Button>
</ButtonGroup>
);
}<div class="join join-vertical" role="group" aria-label="Vertical example">
<button class="btn btn-outline join-item">Top</button>
<button class="btn btn-outline join-item">Middle</button>
<button class="btn btn-outline join-item">Bottom</button>
</div><div class="plf:join plf:join-vertical" role="group" aria-label="Vertical example">
<button class="plf:btn plf:btn-outline plf:join-item">Top</button>
<button class="plf:btn plf:btn-outline plf:join-item">Middle</button>
<button class="plf:btn plf:btn-outline plf:join-item">Bottom</button>
</div>import { Button, ButtonGroup } from '@pelatform/react';
export function Example() {
return (
<ButtonGroup orientation="vertical" aria-label="Vertical example">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup>
);
}import { Button, ButtonGroup } from '@pelatform/react/prefixed';
export function Example() {
return (
<ButtonGroup orientation="vertical" aria-label="Vertical example">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup>
);
}<div class="join" role="group" aria-label="Small group">
<button class="btn btn-outline btn-sm join-item">One</button>
<button class="btn btn-outline btn-sm join-item">Two</button>
</div>
<div class="join" role="group" aria-label="Default group">
<button class="btn btn-outline join-item">One</button>
<button class="btn btn-outline join-item">Two</button>
</div>
<div class="join" role="group" aria-label="Large group">
<button class="btn btn-outline btn-lg join-item">One</button>
<button class="btn btn-outline btn-lg join-item">Two</button>
</div><div class="plf:join" role="group" aria-label="Small group">
<button class="plf:btn plf:btn-outline plf:btn-sm plf:join-item">One</button>
<button class="plf:btn plf:btn-outline plf:btn-sm plf:join-item">Two</button>
</div>
<div class="plf:join" role="group" aria-label="Default group">
<button class="plf:btn plf:btn-outline plf:join-item">One</button>
<button class="plf:btn plf:btn-outline plf:join-item">Two</button>
</div>
<div class="plf:join" role="group" aria-label="Large group">
<button class="plf:btn plf:btn-outline plf:btn-lg plf:join-item">One</button>
<button class="plf:btn plf:btn-outline plf:btn-lg plf:join-item">Two</button>
</div>import { Button, ButtonGroup } from '@pelatform/react';
export function Example() {
return (
<>
<ButtonGroup aria-label="Small group">
<Button variant="outline" size="sm">One</Button>
<Button variant="outline" size="sm">Two</Button>
</ButtonGroup>
<ButtonGroup aria-label="Default group">
<Button variant="outline">One</Button>
<Button variant="outline">Two</Button>
</ButtonGroup>
<ButtonGroup aria-label="Large group">
<Button variant="outline" size="lg">One</Button>
<Button variant="outline" size="lg">Two</Button>
</ButtonGroup>
</>
);
}import { Button, ButtonGroup } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<ButtonGroup aria-label="Small group">
<Button variant="outline" size="sm">One</Button>
<Button variant="outline" size="sm">Two</Button>
</ButtonGroup>
<ButtonGroup aria-label="Default group">
<Button variant="outline">One</Button>
<Button variant="outline">Two</Button>
</ButtonGroup>
<ButtonGroup aria-label="Large group">
<Button variant="outline" size="lg">One</Button>
<Button variant="outline" size="lg">Two</Button>
</ButtonGroup>
</>
);
}Icon buttons
An icon-only button needs an aria-label.
<div class="join" role="group" aria-label="Zoom">
<button class="btn btn-outline btn-square join-item" aria-label="Zoom out">
<span class="icon icon-minus"></span>
</button>
<button class="btn btn-outline btn-square join-item" aria-label="Reset zoom">
<span class="icon icon-rotate"></span>
</button>
<button class="btn btn-outline btn-square join-item" aria-label="Zoom in">
<span class="icon icon-plus"></span>
</button>
</div><div class="plf:join" role="group" aria-label="Zoom">
<button class="plf:btn plf:btn-outline plf:btn-square plf:join-item" aria-label="Zoom out">
<span class="plf:icon plf:icon-minus"></span>
</button>
<button class="plf:btn plf:btn-outline plf:btn-square plf:join-item" aria-label="Reset zoom">
<span class="plf:icon plf:icon-rotate"></span>
</button>
<button class="plf:btn plf:btn-outline plf:btn-square plf:join-item" aria-label="Zoom in">
<span class="plf:icon plf:icon-plus"></span>
</button>
</div>import { Button, ButtonGroup, Icon } from '@pelatform/react';
export function Example() {
return (
<ButtonGroup aria-label="Zoom">
<Button variant="outline" shape="square" aria-label="Zoom out">
<Icon name="minus" />
</Button>
<Button variant="outline" shape="square" aria-label="Reset zoom">
<Icon name="rotate" />
</Button>
<Button variant="outline" shape="square" aria-label="Zoom in">
<Icon name="plus" />
</Button>
</ButtonGroup>
);
}import { Button, ButtonGroup, Icon } from '@pelatform/react/prefixed';
export function Example() {
return (
<ButtonGroup aria-label="Zoom">
<Button variant="outline" shape="square" aria-label="Zoom out">
<Icon name="minus" />
</Button>
<Button variant="outline" shape="square" aria-label="Reset zoom">
<Icon name="rotate" />
</Button>
<Button variant="outline" shape="square" aria-label="Zoom in">
<Icon name="plus" />
</Button>
</ButtonGroup>
);
}Split button
The menu takes no join-item.
<div class="join dropdown" role="group" aria-label="Message actions" data-plf-dropdown-menu data-plf-align="start">
<button class="btn btn-outline join-item">Snooze</button>
<button class="btn btn-outline btn-square join-item" aria-label="More message actions" data-plf-dropdown-menu-trigger>
<span class="icon icon-dots"></span>
</button>
<div class="dropdown-content menu" hidden>
<button class="menu-item">
<span class="icon icon-mail-check"></span>
<span class="menu-text">Mark as read</span>
</button>
<button class="menu-item">
<span class="icon icon-archive"></span>
<span class="menu-text">Archive</span>
</button>
<hr class="menu-separator">
<button class="menu-item">
<span class="icon icon-clock"></span>
<span class="menu-text">Snooze</span>
</button>
<button class="menu-item">
<span class="icon icon-calendar-plus"></span>
<span class="menu-text">Add to calendar</span>
</button>
<button class="menu-item">
<span class="icon icon-list"></span>
<span class="menu-text">Add to list</span>
</button>
<button class="menu-item">
<span class="icon icon-tag"></span>
<span class="menu-text">Label message</span>
</button>
<hr class="menu-separator">
<button class="menu-item menu-item-error">
<span class="icon icon-trash"></span>
<span class="menu-text">Trash</span>
</button>
</div>
</div><div class="plf:join plf:dropdown" role="group" aria-label="Message actions" data-plf-dropdown-menu data-plf-align="start">
<button class="plf:btn plf:btn-outline plf:join-item">Snooze</button>
<button class="plf:btn plf:btn-outline plf:btn-square plf:join-item" aria-label="More message actions" data-plf-dropdown-menu-trigger>
<span class="plf:icon plf:icon-dots"></span>
</button>
<div class="plf:dropdown-content plf:menu" hidden>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-mail-check"></span>
<span class="plf:menu-text">Mark as read</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-archive"></span>
<span class="plf:menu-text">Archive</span>
</button>
<hr class="plf:menu-separator">
<button class="plf:menu-item">
<span class="plf:icon plf:icon-clock"></span>
<span class="plf:menu-text">Snooze</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-calendar-plus"></span>
<span class="plf:menu-text">Add to calendar</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-list"></span>
<span class="plf:menu-text">Add to list</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-tag"></span>
<span class="plf:menu-text">Label message</span>
</button>
<hr class="plf:menu-separator">
<button class="plf:menu-item plf:menu-item-error">
<span class="plf:icon plf:icon-trash"></span>
<span class="plf:menu-text">Trash</span>
</button>
</div>
</div>import {
Button, buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText,
DropdownMenuTrigger, Icon,
} from '@pelatform/react';
export function Example() {
return (
<DropdownMenu className="join" role="group" aria-label="Message actions" align="start">
<Button variant="outline" className="join-item">Snooze</Button>
<DropdownMenuTrigger className={`${buttonClass({ variant: 'outline', shape: 'square' })} join-item`} aria-label="More message actions">
<Icon name="dots" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Icon name="mail-check" />
<DropdownMenuText>Mark as read</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="archive" />
<DropdownMenuText>Archive</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Icon name="clock" />
<DropdownMenuText>Snooze</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="calendar-plus" />
<DropdownMenuText>Add to calendar</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="list" />
<DropdownMenuText>Add to list</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="tag" />
<DropdownMenuText>Label message</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem color="error">
<Icon name="trash" />
<DropdownMenuText>Trash</DropdownMenuText>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}import {
Button, buttonClass, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuText,
DropdownMenuTrigger, Icon,
} from '@pelatform/react/prefixed';
export function Example() {
return (
<DropdownMenu className="plf:join" role="group" aria-label="Message actions" align="start">
<Button variant="outline" className="plf:join-item">Snooze</Button>
<DropdownMenuTrigger className={`${buttonClass({ variant: 'outline', shape: 'square' })} plf:join-item`} aria-label="More message actions">
<Icon name="dots" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Icon name="mail-check" />
<DropdownMenuText>Mark as read</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="archive" />
<DropdownMenuText>Archive</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Icon name="clock" />
<DropdownMenuText>Snooze</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="calendar-plus" />
<DropdownMenuText>Add to calendar</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="list" />
<DropdownMenuText>Add to list</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="tag" />
<DropdownMenuText>Label message</DropdownMenuText>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem color="error">
<Icon name="trash" />
<DropdownMenuText>Trash</DropdownMenuText>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}<div class="join" role="group" aria-label="Disabled example">
<button class="btn btn-outline join-item">Undo</button>
<button class="btn btn-outline join-item" disabled>Redo</button>
<button class="btn btn-outline join-item">History</button>
</div><div class="plf:join" role="group" aria-label="Disabled example">
<button class="plf:btn plf:btn-outline plf:join-item">Undo</button>
<button class="plf:btn plf:btn-outline plf:join-item" disabled>Redo</button>
<button class="plf:btn plf:btn-outline plf:join-item">History</button>
</div>import { Button, ButtonGroup } from '@pelatform/react';
export function Example() {
return (
<ButtonGroup aria-label="Disabled example">
<Button variant="outline">Undo</Button>
<Button variant="outline" disabled>Redo</Button>
<Button variant="outline">History</Button>
</ButtonGroup>
);
}import { Button, ButtonGroup } from '@pelatform/react/prefixed';
export function Example() {
return (
<ButtonGroup aria-label="Disabled example">
<Button variant="outline">Undo</Button>
<Button variant="outline" disabled>Redo</Button>
<Button variant="outline">History</Button>
</ButtonGroup>
);
}React
ButtonGroup from @pelatform/react renders this group and gives each Button and Toggle inside it join-item; give a link the class yourself.
| Prop | Values | Default |
|---|---|---|
orientation |
horizontal, vertical |
horizontal |
The part is ButtonGroupSeparator; the other props are a div’s, className and ref included.
CSS variables
Button Group has no JavaScript of its own. Button variables still style each button.
| Variable | Default |
|---|---|
--plf-button-group-separator-color |
--plf-color-input |