Toolbar

⟦Gróúp óf çóñtrólš wíth óñé táb štóp áñd árrów-kéý ñávígátíóñ.~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Brówšérš~~~⟧: Chrome 123+Firefox 121+Safari 17.5+
⟦Tíér~~⟧: 1
⟦Búñdlé çómpréššéd~~~~~~⟧: 2.04 kB
⟦Fórçéd láýóút búdgét~~~~~~~⟧: 0 ms
⟦Áxé búdgét~~~~⟧: 0
⟦ŠŠR çómpátíblé~~~~~⟧: ⟦Ýéš~~⟧
⟦Públíšhéd çóñtráçt~~~~~~~⟧: ⟦Téšt hárñéšš~~~~~⟧

⟦Pláýgróúñd~~~~⟧

Toolbar

⟦Défáúlt~~~⟧

React

CSS

Tailwind

import { Toolbar } from "@gunkin/uiify";

export default function Example() {
  return (
    <Toolbar.Root className="" aria-label="Formatting">
      <Toolbar.Button>Bold</Toolbar.Button>
      <Toolbar.Separator className="" />
      <Toolbar.Button>Italic</Toolbar.Button>
    </Toolbar.Root>
  );
}

/* Toolbar — grouped action buttons with separators. */

@layer components {
  [data-uiify-toolbar][data-part="root"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-full);
    corner-shape: round;
    background-color: var(--card);
  }

  [data-uiify-toolbar][data-part="root"] > hr[data-part="separator"][data-orientation] {
    flex: none;
    align-self: stretch;
    inline-size: var(--border-width);
    block-size: auto;
    margin-inline: var(--space-md);
    border: 0;
    background-color: var(--border);
  }
}

import { Toolbar } from "@gunkin/uiify";

export default function Example() {
  return (
    <Toolbar.Root
      className="
        data-[part=root]:inline-flex data-[part=root]:items-center data-[part=root]:gap-xs data-[part=root]:p-xs
        data-[part=root]:border-[length:var(--border-width)] data-[part=root]:border-solid
        data-[part=root]:border-border data-[part=root]:rounded-[var(--radius-full)]
        data-[part=root]:[corner-shape:round] data-[part=root]:bg-card
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:flex-none
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:self-stretch
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:[inline-size:var(--border-width)]
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:[block-size:auto]
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:mx-md
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-0
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-current
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-none
        [&[data-part=root]>hr[data-part=separator][data-orientation]]:bg-border
      "
      aria-label="Formatting"
    >
      <Toolbar.Button>Bold</Toolbar.Button>
      <Toolbar.Separator className="" />
      <Toolbar.Button>Italic</Toolbar.Button>
    </Toolbar.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('data-[part=root]:inline-flex data-[part=root]:items-center data-[part=root]:gap-xs data-[part=root]:p-xs data-[part=root]:border-[length:var(--border-width)] data-[part=root]:border-solid data-[part=root]:border-border data-[part=root]:rounded-[var(--radius-full)] data-[part=root]:[corner-shape:round] data-[part=root]:bg-card [&[data-part=root]>hr[data-part=separator][data-orientation]]:flex-none [&[data-part=root]>hr[data-part=separator][data-orientation]]:self-stretch [&[data-part=root]>hr[data-part=separator][data-orientation]]:[inline-size:var(--border-width)] [&[data-part=root]>hr[data-part=separator][data-orientation]]:[block-size:auto] [&[data-part=root]>hr[data-part=separator][data-orientation]]:mx-md [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-0 [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-current [&[data-part=root]>hr[data-part=separator][data-orientation]]:border-none [&[data-part=root]>hr[data-part=separator][data-orientation]]:bg-border');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

⟦ÁPÍ~~⟧

`Toolbar.Root`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`dir`	`"ltr" \| "rtl"`	—	⟦Wrítíñg díréçtíóñ, whíçh flípš whát thé léft áñd ríght árrów kéýš dó.~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`loop`	`boolean`	`true`	⟦Whéthér árrów-kéý ñávígátíóñ wrápš áróúñd át thé fíršt áñd lášt ítém.~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`orientation`	`"horizontal" \| "vertical" \| "both"`	`"horizontal"`	⟦Whíçh árrów kéýš móvé fóçúš bétwééñ ítémš, áñd thé dátá-óríéñtátíóñ válúé.~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Toolbar.Button`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`selected`	`boolean`	—	⟦Tógglé štáté óf thé búttóñ: šétš áríá-préššéd áñd, whéñ trúé, dátá-šéléçtéd áñd thé prímárý fíll.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`children`	`ReactNode`	—	⟦Çóñtéñt óf thé búttóñ.~~~~~~~~⟧
`className`	`string`	—	⟦Çlášš ápplíéd tó thé búttóñ éléméñt.~~~~~~~~~~~~~⟧
`disabled`	`boolean`	`false`	⟦Díšábléš thé búttóñ áñd tákéš ít óút óf thé róvíñg-fóçúš órdér.~~~~~~~~~~~~~~~~~~~~~~~⟧

`Toolbar.Link`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	—	⟦Çóñtéñt óf thé líñk.~~~~~~~⟧
`className`	`string`	—	⟦Çlášš ápplíéd tó thé áñçhór éléméñt.~~~~~~~~~~~~~⟧
`href`*	`string`	—	⟦Déštíñátíóñ óf thé líñk, whíçh ñávígátéš wíthóút JáváŠçrípt.~~~~~~~~~~~~~~~~~~~~~⟧

`Toolbar.Separator`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`className`	`string`	—	⟦Çlášš ápplíéd tó thé `<hr>` éléméñt.~~~~~~~~~~~~⟧
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	⟦Šétš áríá-óríéñtátíóñ áñd dátá-óríéñtátíóñ óñ thé šépárátór.~~~~~~~~~~~~~~~~~~~~~⟧

`Toolbar.ToggleGroup`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`id`*	`string`	—	⟦Bášé fór thé détérmíñíštíç ídš áñd thé šháréd íñpút gróúp ñámé.~~~~~~~~~~~~~~~~~~~~~~~⟧
`type`	`"single" \| "multiple"`	`"single"`	⟦Whéthér óñé ór šévérál tóggléš máý bé préššéd, çhóóšíñg rádíó ór çhéçkbóx íñpútš.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`items`*	`readonly ToggleGroupItem[]`	—	⟦Éáçh ítém íš { value, label, disabled? }.~~~~~~~~~~~~~~~⟧
`defaultValue`	`string \| readonly string[] \| undefined`	—	⟦Préššéd óñ fíršt réñdér. Úñçóñtrólléd, šó ít šúrvívéš wíth ñó JáváŠçrípt.~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	⟦Díréçtíóñ thé tóggléš áré láíd óút íñ.~~~~~~~~~~~~~~⟧
`className`	`string`	—	⟦Çlášš ápplíéd tó thé gróúp róót.~~~~~~~~~~~~⟧

⟦Kéýbóárd~~~⟧

⟦Kéý~~⟧	⟦Áçtíóñ~~~⟧
`Tab`	⟦Móvé fóçúš tó/fróm thé çóñtról~~~~~~~~~~~⟧
`Enter` / `Space`	⟦Áçtíváté whéñ fóçúšéd (búttóñ-líké çóñtrólš)~~~~~~~~~~~~~~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Úšéš šémáñtíç HTML whéré póššíblé. Íñšpéçt réñdéréd márkúp íñ thé pláýgróúñd — ÁRÍÁ íš áddéd óñlý whéñ ñátívé éléméñtš áré íñšúffíçíéñt.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧

data-disabled

⟦Fráméwórk~~~~⟧

⟦Štýlé~~⟧

⟦Thémé~~⟧

⟦Láñgúágé~~~⟧

Toolbar

⟦Pláýgróúñd~~~~⟧

Toolbar

⟦Défáúlt~~~⟧

⟦ÁPÍ~~⟧

`Toolbar.Root`

`Toolbar.Button`

`Toolbar.Link`

`Toolbar.Separator`

`Toolbar.ToggleGroup`

⟦Kéýbóárd~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧