Button group

24 · UI elements

Shows related buttons as an attached, single-piece group. It suits period selection or icon toolbars.

acun:button-group

Basic usage

The group is only a container and sets role="group"; the buttons handle the corners and adjoining edges with their own classes. Add the classes below to each button. Describe what the group is for to screen readers with aria-label.

LIVE EXAMPLE

<acun:button-group aria-label="Period">
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Day</acun:button>
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Week</acun:button>
    <acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Month</acun:button>
</acun:button-group>

Prop	Values
`class value of the buttons`	!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10

Icon toolbar

A compact toolbar is built from icon-only buttons (size="icon"). Give each button an aria-label and a title.

LIVE EXAMPLE

<acun:button-group aria-label="Record actions">
    <acun:button variant="white" size="icon" aria-label="Edit" title="Edit" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="pencil-square" size="4" />
    </acun:button>
    <acun:button variant="white" size="icon" aria-label="Copy" title="Copy" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="document-duplicate" size="4" />
    </acun:button>
    <acun:button variant="white" size="icon" aria-label="Delete" title="Delete" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">
        <acun:icon name="trash" size="4" />
    </acun:button>
</acun:button-group>

API

Props and slots

The values the component accepts.

Prop	Default	Description
`(attributes)`	—	Takes no props; attributes such as class and aria-label are added to the container

Slots: default (acun:button elements)