Home

Icon button

A Button holding only a glyph, round, in five sizes (icon-xs to icon-xl); the glyph grows a little on hover and sinks on press.

ui.icon-buttoncomponents/ui/button.tsx

Use case

For the AI

Use it for a compact action whose glyph is unmistakable: the trash on an order line, copy beside a portal link, a plus to add a line to a quote, the eye that shows a password inside a field. It saves room in tables, toolbars and title rows where a worded button would crowd. Anything a person could misread needs words, so it becomes a Button with a label.

Use it when

  • A row action in a table (delete, copy, edit)
  • A small action inside a field (show the password, clear)
  • Paging arrows beside a date or a record
  • A plus that adds a line or an item

Use something else when

  • The action is not obvious from the glyph alone: Button
  • The icon stays on or off (bold, favourite): Toggle
  • Several actions on a row, behind one button: Dropdown menu
  • A name shown on hover for the glyph: Tooltip

Examples

The glyph grows a little on hover and sinks on press
Sizes

Code

Import

import { CopyIcon, PlusIcon, TrashIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"

Usage

<Button size="icon" variant="ghost" aria-label="Delete Line">
  <TrashIcon />
</Button>

<Button size="icon-sm" variant="secondary" aria-label="Copy Link">
  <CopyIcon />
</Button>

<Button size="icon" aria-label="Add a Line">
  <PlusIcon />
</Button>

Rules

  • Always pass aria-label naming the action (Delete Line, Copy Link).
  • size is icon-xs, icon-sm, icon, icon-lg or icon-xl; sm and lg are for buttons with words.
  • Never set a size class on the glyph: each icon size sets it.
  • Inside a field (an input group) use the ghost variant at icon-xs or icon-sm.
  • On a touch screen the hit area grows to 44px by itself; do not pad it.