IconButton
A square button that renders a single icon, with optional external label and notification badge.
Installation
pnpm add @tessinaui/uiUsage
import { IconButton } from "@tessinaui/ui";
import { Bell } from "lucide-react";
<IconButton icon={<Bell />} aria-label="Notifications" />Playground
Configure every property of the IconButton component interactively:
Preview
Loading...
Showcase
All variant and intent combinations at every size, with disabled and loading states:
Preview
Loading...
API Reference
Props
The IconButton component extends native HTML button attributes (excluding children) and includes:
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | The icon rendered inside the button |
aria-label | string | — | Accessible label (required) |
variant | "primary" | "secondary" | "ghost" | "outline" | "primary" | The visual style variant |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | The semantic intent color |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xs" | The size of the button (square) |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | The border radius style |
tone | "default" | "onColor" | "default" | Surface tone for colored backgrounds |
labelPosition | "none" | "top" | "bottom" | "start" | "end" | "none" | Position of the external text label |
label | string | — | Visible label text (used when labelPosition !== "none") |
showBadge | boolean | false | Show a notification badge on the top-trailing corner |
badgeCount | string | number | — | Badge count/label rendered inside the badge dot |
loading | boolean | false | Shows a loading spinner and disables the button |
dir | "ltr" | "rtl" | "ltr" | Text direction for RTL layouts |
All standard HTML button attributes are also supported (onClick, disabled, type, etc.).
Variants
Variant Options
- primary: Filled button for main actions
- secondary: Gray button for alternative actions
- ghost: Transparent button with no background
- outline: Button with border, fills on hover and pressed states
Intent Options
Intent controls the semantic color of the button, independent of the variant style:
- none: Default color scheme
- error: Red color scheme for destructive or error actions
- warning: Yellow color scheme with dark text for warning actions
- success: Green color scheme for success or confirmation actions
- info: Blue color scheme for informational actions
Size Options
All sizes are square:
- xs: 32 x 32 px (default)
- sm: 40 x 40 px
- md: 44 x 44 px
- lg: 48 x 48 px
- xl: 56 x 56 px
Sizes xs and sm use an invisible tap-area extension to meet the 44px minimum touch target.
Accessibility
The IconButton component:
- Requires
aria-labelfor screen reader accessibility - Uses semantic
<button>element withtype="button" - Supports keyboard navigation (Enter and Space)
- Includes proper focus states with visible ring (WCAG AA)
- Sets
aria-busy="true"during loading state - Badge includes descriptive
aria-labelfor notification count - Tap-area extension ensures 44px minimum touch target on small sizes