shadcn.io is an independent project built on shadcn/ui
Three large outline icon buttons: bold, italic and underline. They are taller than the default size. None start pressed.
Use the large size when the formats are the main controls, such as on a touch screen. The default size of a Toggle Group fits a normal toolbar. Ark UI in React does not apply bold, italic or underline.
Installation
Anatomy
Usage
<ToggleGroup
aria-label="Text formatting"
multiple
size="lg"
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 large toggle groups?
Use lg when the group is the main control on the screen, when there are only a few options, or when people use it with touch: tablet editors, kiosks, presentation tools. Avoid it in dense toolbars, where the extra size takes room without helping.
Are large toggle groups better for accessibility?
Larger targets are easier to hit for people with limited dexterity and easier to see for people with low vision. In most styles lg is still a little under the 44 pixel touch target, so keep spacing between the items as well. The names and pressed states are announced the same at every size.
How much horizontal space do large toggle groups require?
Each item is wider and taller than at the default size, and the group's spacing adds a gap between them. Three icon-only items fit easily even on a phone; with more, or with text labels, set orientation="vertical" or split the options into separate groups.
Should I use larger icons with large toggle groups?
Not necessarily. The items keep the icon at its usual size (size-4 in most styles) and put the extra size into padding, which is what makes them easier to hit. If an icon looks lost, give it size-5, but don't let it fill the button.
API Reference
Toggle Group
Sets aria-label="Text formatting", multiple, size="lg", variant="outline", aria-label="Toggle bold" and value="bold". The rest is on the Toggle Group page.
