Skip to content

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

Free

Rich Text Toolbar Button Group for Vue

A formatting bar where Bold, Italic, and Underline toggle, beside alignment and list groups that do not.

UI library: Ark UI

Three icon groups. Bold, Italic, and Underline each toggle, filled and marked pressed when on, all starting off. Align left, center, and right do not stay selected. Bulleted list and numbered list do not stay selected either. No document is formatted.

Use the toggles for styles that can combine. Alignment is one choice, so it should keep a value. That control is a Toggle Group. In Vue, Ark UI does not apply the formatting to any 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.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="Text style">
    <Button
      aria-label="Bold"
      :aria-pressed="bold"
      @click="toggleBold"
      size="icon-sm"
      :variant='bold ? "default" : "outline"'
    >
      <BoldIcon aria-hidden="true" />
    </Button>
    <Button
      aria-label="Italic"
      :aria-pressed="italic"
      @click="toggleItalic"
      size="icon-sm"
      :variant='italic ? "default" : "outline"'
    >
      <ItalicIcon aria-hidden="true" />
    </Button>
    <Button
      aria-label="Underline"
      :aria-pressed="underline"
      @click="toggleUnderline"
      size="icon-sm"
      :variant='underline ? "default" : "outline"'
    >
      <UnderlineIcon aria-hidden="true" />
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Alignment">
<!-- The rest of the file is under Installation. -->

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.

API Reference

Button Group

Sets aria-label="Text style", aria-label="Alignment" and aria-label="Formatting". The rest is on the Button Group page.

Button

Sets aria-label="Bold", aria-pressed="bold", click="toggleBold", size="icon-sm", variant="bold ? default : outline" and aria-label="Italic". The rest is on the Button page.

All 39 button group examples