Radix Vue

A container for grouping a set of controls, such as buttons, Toolbar groups or dropdown menus.

Features

Full keyboard navigation.

Installation

Install the component from your command line.

bash

npm install radix-vue

Anatomy

Import the component.

vue

<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton />
    <ToolbarSeparator />
    <ToolbarLink />
    <ToolbarToggleGroup>
      <ToolbarToggleItem />
    </ToolbarToggleGroup>
  </ToolbarRoot>
</template>

API Reference

Root

Contains all the toolbar component parts.

Prop	Type	Default
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`
`loop`	`boolean`	`true`
`as`	`string \| Component`	`div`
`asChild`	`boolean`	`false`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Button

A button item.

Prop	Type	Default
`as`	`string \| Component`	`button`
`asChild`	`boolean`	`false`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Link

A link item.

Prop	Type	Default
`as`	`string \| Component`	`a`
`asChild`	`boolean`	`false`

ToggleGroup

A set of two-state buttons that can be toggled on or off.

Prop	Type	Default
`type*`	`enum`
`modelValue`	`string \| string[]`
`defaultValue`	`string \| string[]`
`disabled`	`boolean`	`false`
`as`	`string \| Component`	`div`
`asChild`	`boolean`	`false`

Emit	Type
`@update:modelValue`	`(payload: string \| string[]) => void`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

ToggleItem

An item in the group.

Prop	Type	Default
`as`	`string \| Component`	`button`
`asChild`	`boolean`	`false`
`value*`	`string`
`disabled`	`boolean`

Data Attribute	Value
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Separator

Used to visually separate items in the toolbar

Prop	Type	Default
`as`	`string \| Component`	`div`
`asChild`	`boolean`	`false`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

Use with other primitives

All our primitives which expose a Trigger part, such as Dialog, AlertDialog, Popover, DropdownMenu can be composed within a toolbar by using the asChild prop.

Here is an example using our DropdownMenu primitive.

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton>Action 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as-child>
        <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
      </ToolbarButton>
      <DropdownMenuContent>…</DropdownMenuContent>
    </DropdownMenuRoot>
  </ToolbarRoot>
</template>

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to the first item in the group.
`Space`	Activates/deactivates the item.
`Enter`	Activates/deactivates the item.
`ArrowDown`	Moves focus to the next item depending on `orientation`.
`ArrowRight`	Moves focus to the next item depending on `orientation`.
`ArrowUp`	Moves focus to the previous item depending on `orientation` .
`ArrowLeft`	Moves focus to the previous item depending on `orientation` .
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.

Toolbar ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Button ​

Link ​

ToggleGroup ​

ToggleItem ​

Separator ​

Examples ​

Use with other primitives ​

Accessibility ​

Keyboard Interactions ​

Toolbar