Icon button
An icon button runs an action with an icon alone. It has no visible text, so its name is a required prop, which is also its tooltip.
Variants and shape
Ghost is the default for bars and rows. Secondary adds a plate. Round is for bar triggers.
Show code
<KbIconButton label="Close details"><CloseIcon /></KbIconButton>
<KbIconButton label="Close details" variant="secondary" round><CloseIcon /></KbIconButton>
<KbIconButton label="Close details" size="sm"><CloseIcon /></KbIconButton>When to use
- Use it when the icon is universal and space is tight: close, expand, dismiss.
- If the action isn't obvious from the icon, use a button with text.
- Name the action, not the icon: Hide details, not Panel.
- A toggle sets aria-expanded or aria-pressed so state is spoken.
Import
import { KbIconButton } from "@/components/ui/KbButton";
<KbIconButton label="Close details" onClick={close}><CloseIcon /></KbIconButton>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Required. The accessible name and the tooltip. |
variant | "primary" | "secondary" | "ghost" | "danger" | "link" | "ghost" | Ghost in bars and rows. |
size | "sm" | "md" | "lg" | "md" | A square at the button height. |
round | boolean | false | Pill corners. |
Keyboard and screen readers
- The label is the aria-label and the title, so keyboard, touch and screen-reader users all get the name.
- The icon is decorative and hidden from assistive tech.
- Under 860px wide the target grows to 44px.