shadcn.io is an independent project built on shadcn/ui
Three small outline icon buttons: bold, italic and underline. They are shorter than the default size. None start pressed, and several can be pressed.
Use the small size in a comment box or a cramped toolbar. A Toggle with a visible word is clearer for one format. Ark UI in Vue does not shrink the hit area for you.
Installation
Anatomy
Usage
<ToggleGroup aria-label="Text formatting" :multiple="true" size="sm" variant="outline">
<ToggleGroupItem aria-label="Toggle bold" value="bold">
<BoldIcon aria-hidden="true" />
</ToggleGroupItem>
<ToggleGroupItem aria-label="Toggle italic" value="italic">
<ItalicIcon aria-hidden="true" />
</ToggleGroupItem>
<ToggleGroupItem aria-label="Toggle underline" value="underline">
<UnderlineIcon aria-hidden="true" />
</ToggleGroupItem>
</ToggleGroup>FAQ
When should I use small toggle groups?
Use sm when space is tight: a toolbar that floats over selected text, a narrow sidebar, a popover editor or a table header. Keep the default size for the main toolbar of a page.
Why use multiple selection instead of single for toggle groups?
Because the options here combine: text can be bold, italic and underlined at once, so each item stays pressed on its own. Single selection, where pressing one item releases the others, is for options that exclude each other, like alignment.
Why use variant outline for small toggle groups?
At a small size, the border marks each item as a separate button, which helps when the icons are close together. The default variant, with no border, also works and suits a toolbar that already has its own frame.
How does ToggleGroup handle spacing between small items?
The group's spacing sets the gap between items, 2 by default, whatever the size. Lower it for a tighter row, or set it to 0 to join the items into one bar where the outline borders are shared.
Are small toggle groups accessible on mobile touchscreens?
They meet the 24 pixel minimum of WCAG 2.5.8, but they're well under the 44 pixel touch target, so they suit pointer-driven layouts best. On touch screens, use the default size or keep enough spacing between items that a tap can't hit the wrong one.
API Reference
Toggle Group
Sets aria-label="Text formatting", multiple, size="sm", variant="outline", aria-label="Toggle bold" and value="bold". The rest is on the Toggle Group page.
