Toolbar

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

Edited 2 hours ago

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

const toggleStateSingle = ref('center')
const toggleStateMultiple = ref([])
</script>

<template>
  <ToolbarRoot
    class="flex p-[10px] w-full max-w-[610px] !min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA7"
    aria-label="Formatting options"
  >
    <ToolbarToggleGroup v-model="toggleStateMultiple" type="multiple" aria-label="Text formatting">
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="bold"
        aria-label="Bold"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:font-bold" />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="italic"
        aria-label="Italic"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:font-italic" />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="strikethrough"
        aria-label="Strike through"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:strikethrough" />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarToggleGroup v-model="toggleStateSingle" type="single" aria-label="Text Alignment">
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="left"
        aria-label="Left Aligned"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:text-align-left" />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="center"
        aria-label="Center Aligned"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:text-align-center" />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="right"
        aria-label="Right Aligned"
      >
        <Icon class="w-[15px] h-[15px]" icon="radix-icons:text-align-right" />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarLink
      class="bg-transparent !font-normal !text-mauve11 inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
      href="#"
      target="_blank"
      style="margin-right: 10"
    >
      Edited 2 hours ago
    </ToolbarLink>
    <ToolbarButton
      class="px-[10px] text-white bg-green9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-green10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7"
      style="margin-left: auto"
    >
      Share
    </ToolbarButton>
  </ToolbarRoot>
</template>

Features

• Full keyboard navigation.

Installation

Install the component from your command line.

npm install radix-vue

Anatomy

Import the component.

<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	Default	Type
orientation	"horizontal"	enum The orientation of the toolbar
dir		enum The reading direction of the toolbar If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
loop	true	boolean When true, keyboard navigation will loop from last tab to first, and vice versa.
as	div	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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

Button

A button item.

Prop	Default	Type
as	button	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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

Link

A link item.

Prop	Default	Type
as	a	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ToggleGroup

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

Prop	Default	Type
type*		enum Determines whether a single or multiple items can be pressed at a time.
modelValue		string | string[] The controlled value of the pressed items. Can be binded with v-model.
defaultValue		string | string[] The value of the item to show as pressed when initially rendered and type is "single". Use when you do not need to control the state of the items.
disabled	false	boolean When true, prevents the user from interacting with the toggle group and all its items.
as	div	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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

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

ToggleItem

An item in the group.

Prop	Default	Type
as	button	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
value*		string A unique value for the item.
disabled		boolean When true, prevents the user from interacting with the item.

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	Default	Type
as	div	string | Component The element or component this component should render as. Can be overwrite by asChild
asChild	false	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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.

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