Radix Vue

Appearance

Toolbar ​

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.

PropTypeDefault
orientation
enum
"horizontal"
dir
enum
loop
boolean
true
as
string | Component
div
asChild
boolean
false
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Button ​

A button item.

PropTypeDefault
as
string | Component
button
asChild
boolean
false
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

A link item.

PropTypeDefault
as
string | Component
a
asChild
boolean
false

ToggleGroup ​

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

PropTypeDefault
type*
enum
modelValue
string | string[]
defaultValue
string | string[]
disabled
boolean
false
as
string | Component
div
asChild
boolean
false
EmitType
@update:modelValue
(payload: string | string[]) => void
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

ToggleItem ​

An item in the group.

PropTypeDefault
as
string | Component
button
asChild
boolean
false
value*
string
disabled
boolean
Data AttributeValue
[data-state]"on" | "off"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Separator ​

Used to visually separate items in the toolbar

PropTypeDefault
as
string | Component
div
asChild
boolean
false
Data AttributeValue
[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 ​

KeyDescription
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.