Oku Primitives

Appearance

Toolbar ​

A container for grouping a set of controls, such as buttons, Toolbar groups or dropdown menus.
vue
vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from '@oku-ui/primitives'
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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
        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-mauve12 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-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
      href="#"
      target="_blank"
      style="margin-right: 10"
    >
      Edited 2 hours ago
    </ToolbarLink>
    <ToolbarButton
      class="px-[10px] text-white bg-indigo9 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-indigo10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7"
      style="margin-left: auto"
    >
      Share
    </ToolbarButton>
  </ToolbarRoot>
</template>

Features ​

  • Full keyboard navigation.

Installation ​

Install the component from your command line.

sh
sh
$ npm add @oku-ui/primitives

Anatomy ​

Import the component.

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

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

API Reference ​

Root ​

Contains all the toolbar component parts.

PropDefaultType
dir
'ltr' | 'rtl'
loop
boolean
orientation
'horizontal' | 'vertical'
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Button ​

A button item.

PropDefaultType
as
'div'
object | AsTag
disabled
boolean
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

A link item.

PropDefaultType
as
'div'
object | AsTag

ToggleGroup ​

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

PropDefaultType
defaultValue
string | string[]
dir
'ltr' | 'rtl'
disabled
boolean

Whether the group is disabled from user interaction.

loop
boolean
orientation
'horizontal' | 'vertical'
type
'single' | 'multiple'
value
string | string[]
EmitPayload
update:value
[value: string | string[]]
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

ToggleItem ​

An item in the group.

PropDefaultType
as
'div'
object | AsTag
disabled
boolean
value*
string
Data AttributeValue
[data-state]"on" | "off"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Separator ​

Used to visually separate items in the toolbar

PropDefaultType
decorative
boolean

Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.

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 as="template" prop.

Here is an example using our DropdownMenu primitive.

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

<template>
  <ToolbarRoot>
    <ToolbarButton>Action 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as="template">
        <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.