Toolbar

Accessible toolbar with buttons, links, and toggle groups. Wraps bits-ui Toolbar.

Example

Sub-components

Toolbar.Root

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Toolbar.Button

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Toolbar.Link

Prop	Type	Default	Description
`href`	`string`	—	Link destination
`class`	`string`	—	Additional CSS classes

Toolbar.Group

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or many items can be active
`class`	`string`	—	Additional CSS classes

Toolbar.GroupItem

Prop	Type	Default	Description
`value`	`string`	—	Item identifier
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Toolbar } from '@chrissnell/chonky-ui';
</script>

<Toolbar.Root>
  <Toolbar.Button>Bold</Toolbar.Button>
  <Toolbar.Button>Italic</Toolbar.Button>
  <Toolbar.Group type="single">
    <Toolbar.GroupItem value="left">Left</Toolbar.GroupItem>
    <Toolbar.GroupItem value="center">Center</Toolbar.GroupItem>
    <Toolbar.GroupItem value="right">Right</Toolbar.GroupItem>
  </Toolbar.Group>
</Toolbar.Root>