IconButton
A button built around an icon. For icon-only use, label is the accessible name (required —
there is no visible text). With text, the label is optional.
import { IconButton } from '@gg-software/ui';
// icon-only: label is the accessible name
<IconButton label="Settings" icon={<SettingsIcon />} />
// icon + visible text
<IconButton variant="primary" text="Add" icon={<PlusIcon />} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon* | ReactNode | — | the icon to render (an svg or icon element) |
iconPosition | "left" | "right" | — | which side of the text the icon sits on (only relevant with `text`) |
variant | "default" | "primary" | "text" | "dashed" | "link" | — | |
size | "sm" | "md" | "lg" | — | |
danger | boolean | — | danger tone, applied on top of the variant |
disabled | boolean | — | |
loading | boolean | — | |
type | "button" | "submit" | "reset" | — | |
className | string | — | |
onClick | (() => void) | — | |
text | ReactNode | — | visible text shown next to the icon |
label | string | — | accessible name override (optional — the visible text already names the button) accessible name — required for icon-only buttons (no visible text) |
* required · generated from packages/ui/src/input/IconButton/IconButton.tsx