Toolbar
<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 add 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 |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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. | |
dir | 'ltr' | 'rtl' The reading direction of the combobox when applicable. | |
loop | boolean When | |
orientation | 'horizontal' | 'vertical' | 'horizontal' The orientation of the toolbar |
Data Attribute | Value |
---|---|
[data-orientation] | "vertical" | "horizontal" |
Button
A button item.
Prop | Default | Type |
---|---|---|
as | 'button' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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. | |
disabled | boolean |
Data Attribute | Value |
---|---|
[data-orientation] | "vertical" | "horizontal" |
Link
A link item.
Prop | Default | Type |
---|---|---|
as | 'a' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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 |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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. | |
defaultValue | string | string[] The default active value of the item(s). Use when you do not need to control the state of the item(s). | |
dir | 'ltr' | 'rtl' The reading direction of the combobox when applicable. | |
disabled | boolean When | |
loop | boolean When | |
modelValue | string | string[] The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with | |
orientation | 'vertical' | 'horizontal' The orientation of the component, which determines how focus moves: | |
rovingFocus | boolean When | |
type | 'single' | 'multiple' Determines whether a "single" or "multiple" items can be pressed at a time. This prop will be ignored if any of |
Emit | Payload |
---|---|
update:modelValue | [payload: string | string[]] Event handler called when the value changes. |
Data Attribute | Value |
---|---|
[data-orientation] | "vertical" | "horizontal" |
ToggleItem
An item in the group.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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. | |
defaultValue | boolean The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state. | |
disabled | boolean When | |
pressed | boolean The controlled pressed state of the toggle. Can be bind as | |
value* | string A string value for the toggle group item. All items within a toggle group should use a unique value. |
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' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | 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. |