Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Advanced

Rich Text Toolbar Button Group for React

A rich text toolbar of icon buttons where Bold, Italic and Underline toggle on, beside alignment and list groups.

Framework
UI library

The formatting bar above a text editor, as three icon-only groups. Bold, Italic and Underline each keep their own on or off state, filled and announced as pressed when on. The alignment and list groups show the same layout without state.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do Bold, Italic and Underline toggle?

Each has its own flag, all starting off. Pressing a button flips its flag, which switches the button to variant="default" and sets aria-pressed.

How are the icon buttons named?

Every button has an aria-label, such as Bold, Align center or Numbered list, and size="icon-sm". The icons have aria-hidden="true".

Why don't the alignment buttons stay selected?

They have no state in the demo. Alignment is one choice out of three, so keep one value and fill the matching button, or use a Toggle Group with a single value.

Does the toolbar format any text?

No. Call your editor's bold, italic or list command from each button, and set the pressed state from the editor's selection so it follows the cursor.

Should Bold be a Toggle?

It can be. A Toggle keeps the pressed state for you. These are plain buttons with aria-pressed, which works the same for a screen reader.

Is this a toolbar for assistive tech?

Each group is role="group" with an aria-label. For a full role="toolbar" with Arrow key movement between buttons, add that behavior yourself.

All 39 button group examples