Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Large Toggle for Solid

A large icon button for underline, taller than the default, with more padding around the icon.

UI library: Ark UI

A single large icon button shows an underline mark and no visible word. It is taller than the default size.

Use the large size when the toggle is a primary control, such as on a touch screen. The default Toggle fits a normal toolbar. In Solid, Ark UI does not underline the text.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Toggle anatomy: root, indicator

Usage

<Toggle aria-label="Toggle underline" size="lg">
    <UnderlineIcon aria-hidden="true" />
  </Toggle>

FAQ

When should I use large toggle buttons?

Use lg when there are few toggles and they're the main action, or when people use the screen with touch. Avoid it in dense toolbars, where the extra height and padding take space without helping.

Are large toggles better for accessibility?

A bigger target is easier to hit for people with limited dexterity and easier to see for people with low vision. In most styles, though, lg is still a little under the 44 pixel touch target, so on touch screens also leave space between toggles. The name and pressed state are announced the same at every size.

Should I use larger icons with large toggles?

Not necessarily. The Toggle keeps the icon at its usual size (size-4 in most styles) and the extra size goes into padding, which is what makes the target easier to hit. If the icon looks lost, give it size-5, but don't let it fill the button.

Can I group multiple large toggles together?

Yes, with the Toggle Group and size="lg", as the Large Toggle Group example does. Large items take more width, so keep a group to a few options, or set orientation="vertical" to stack them in a narrow space.

Should large toggles include text labels?

They have room for one. Add the text after the icon inside the Toggle, as the Toggle with Text example does, and drop the aria-label, since the text becomes the name. Labels help most in simplified interfaces for people who don't know the icons.

Do large toggles need to scale down on mobile?

Usually not: the larger target helps most on touch screens, where fingers are less precise than a mouse. Scale down only if the toolbar no longer fits, and then prefer fewer toggles or a vertical layout over smaller ones.

API Reference

Toggle

Sets aria-label="Toggle underline" and size="lg". The rest is on the Toggle page.