Toolbar

Usage

import { Toolbar } from '@hareui/vue'

<script setup lang="ts">import { Icon } from '@iconify/vue'import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar } from '@hareui/vue'</script><template>  <Toolbar aria-label="Text formatting">    <ToggleButtonGroup aria-label="Text style" selection-mode="multiple" separator>      <ToggleButton icon-only aria-label="Bold" value="bold">        <Icon icon="gravity-ui:bold" />      </ToggleButton>      <ToggleButton icon-only aria-label="Italic" value="italic">        <Icon icon="gravity-ui:italic" />      </ToggleButton>      <ToggleButton icon-only aria-label="Underline" value="underline">        <Icon icon="gravity-ui:underline" />      </ToggleButton>    </ToggleButtonGroup>    <Separator />    <ButtonGroup variant="tertiary" separator>      <Button icon-only aria-label="Copy">        <Icon icon="gravity-ui:copy" />      </Button>      <Button icon-only aria-label="Cut">        <Icon icon="gravity-ui:scissors" />      </Button>    </ButtonGroup>  </Toolbar></template>

Examples

Vertical

<script setup lang="ts">import { Icon } from '@iconify/vue'import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar } from '@hareui/vue'</script><template>  <Toolbar aria-label="Tools" orientation="vertical">    <ToggleButtonGroup aria-label="Text style" selection-mode="multiple" separator>      <ToggleButton icon-only aria-label="Bold" value="bold">        <Icon icon="gravity-ui:bold" />      </ToggleButton>      <ToggleButton icon-only aria-label="Italic" value="italic">        <Icon icon="gravity-ui:italic" />      </ToggleButton>      <ToggleButton icon-only aria-label="Underline" value="underline">        <Icon icon="gravity-ui:underline" />      </ToggleButton>    </ToggleButtonGroup>    <Separator />    <ButtonGroup variant="tertiary" separator>      <Button icon-only aria-label="Undo">        <Icon icon="gravity-ui:arrow-uturn-ccw-left" />      </Button>      <Button icon-only aria-label="Redo">        <Icon icon="gravity-ui:arrow-uturn-cw-right" />      </Button>    </ButtonGroup>  </Toolbar></template>

Attached

<script setup lang="ts">import { Icon } from '@iconify/vue'import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar } from '@hareui/vue'</script><template>  <Toolbar attached aria-label="Text formatting">    <ToggleButtonGroup aria-label="Text style" selection-mode="multiple" separator>      <ToggleButton icon-only aria-label="Bold" value="bold">        <Icon icon="gravity-ui:bold" />      </ToggleButton>      <ToggleButton icon-only aria-label="Italic" value="italic">        <Icon icon="gravity-ui:italic" />      </ToggleButton>      <ToggleButton icon-only aria-label="Underline" value="underline">        <Icon icon="gravity-ui:underline" />      </ToggleButton>    </ToggleButtonGroup>    <Separator />    <ButtonGroup variant="tertiary" separator>      <Button icon-only aria-label="Copy">        <Icon icon="gravity-ui:copy" />      </Button>      <Button icon-only aria-label="Cut">        <Icon icon="gravity-ui:scissors" />      </Button>    </ButtonGroup>  </Toolbar></template>

With ButtonGroup

<script setup lang="ts">import { Icon } from '@iconify/vue'import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar } from '@hareui/vue'</script><template>  <Toolbar aria-label="Editor toolbar">    <ButtonGroup variant="tertiary" separator>      <Button>        <Icon icon="gravity-ui:arrow-uturn-ccw-left" />        Undo      </Button>      <Button>        <Icon icon="gravity-ui:arrow-uturn-cw-right" />        Redo      </Button>    </ButtonGroup>    <Separator />    <ToggleButtonGroup aria-label="Text style" selection-mode="multiple" separator>      <ToggleButton icon-only aria-label="Bold" value="bold">        <Icon icon="gravity-ui:bold" />      </ToggleButton>      <ToggleButton icon-only aria-label="Italic" value="italic">        <Icon icon="gravity-ui:italic" />      </ToggleButton>      <ToggleButton icon-only aria-label="Underline" value="underline">        <Icon icon="gravity-ui:underline" />      </ToggleButton>    </ToggleButtonGroup>    <Separator />    <ButtonGroup variant="tertiary" separator>      <Button icon-only aria-label="Align left">        <Icon icon="gravity-ui:text-align-left" />      </Button>      <Button icon-only aria-label="Align center">        <Icon icon="gravity-ui:text-align-center" />      </Button>      <Button icon-only aria-label="Align right">        <Icon icon="gravity-ui:text-align-right" />      </Button>    </ButtonGroup>  </Toolbar></template>

Customization

Tailwind CSS

<script setup lang="ts">import { Icon } from '@iconify/vue'import { ToggleButton, ToggleButtonGroup, Toolbar } from '@hareui/vue'const toggleClass = 'rounded-lg data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground'</script><template>  <Toolbar    aria-label="Formatting toolbar"    class="gap-1 rounded-xl border border-border/80 bg-surface-secondary p-1.5"  >    <ToggleButtonGroup aria-label="Text style" class="gap-0.5" selection-mode="multiple">      <ToggleButton icon-only aria-label="Bold" :class="toggleClass" value="bold">        <Icon icon="gravity-ui:bold" />      </ToggleButton>      <ToggleButton icon-only aria-label="Italic" :class="toggleClass" value="italic">        <Icon icon="gravity-ui:italic" />      </ToggleButton>      <ToggleButton icon-only aria-label="Underline" :class="toggleClass" value="underline">        <Icon icon="gravity-ui:underline" />      </ToggleButton>    </ToggleButtonGroup>  </Toolbar></template>

Global theme override

Override the toolbar theme app-wide with createHareUI:

app.use(createHareUI({
  ui: {
    toolbar: {
      slots: { base: 'gap-4 rounded-lg bg-surface p-3' },
    },
  },
}))

Styling Reference

The root carries data-slot="toolbar" and data-orientation, as in HeroUI.

`ui` key	HeroUI selector	Description
`base`	`.toolbar`	Base container
`separatorVertical`	`.toolbar .separator--vertical`	Classes added to each vertical Separator inside the toolbar
`separatorHorizontal`	`.toolbar .separator--horizontal`	Classes added to each horizontal Separator inside the toolbar
`buttonGroup`	`.toolbar--vertical .button-group`	Classes added to each ButtonGroup inside the toolbar

Variants: orientation (horizontal, vertical) and attached (surface background with full rounding).

Inside a Toolbar, ToggleButtonGroups and ButtonGroups take the toolbar's orientation and Separators take the perpendicular one, unless they set orientation themselves.

API Reference

Props

Prop	Type	Default	Description
`as`	`AsTag \| Component`	`"div"`	The element or component to render as.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the toolbar. Arrow keys follow it, ToggleButtonGroups inside take it, and Separators inside take the perpendicular one.
`attached`	`boolean`	`false`	Whether the toolbar has a surface background with full rounding (HeroUI's `isAttached`).
`ui`	`ComponentSlots<{ slots: { base: string; separatorVertical: string; separatorHorizontal: string; buttonGroup: string; }; variants: { orientation: { horizontal: { base: string; }; vertical: { base: string; buttonGroup: string; }; }; attached: { true: { base: string; }; }; }; defaultVariants: { orientation: string; attached: boolean; }; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`default`	`{ orientation: "horizontal" \| "vertical"; }`	Toolbar controls; receives HeroUI's render props.

ButtonGroup

ToggleButtonGroup

Separator

On this page