Icon Button
A button with an icon and a visually hidden label.
Examples
Variants
Sizes
Accessibility
- Provide a clear
labelfor the button that describes its action. - Avoid placing buttons very close to other interactive elements to prevent accidental activation. Important for e.g users with motor impairments.
API Reference
| Prop | Default | Description |
|---|---|---|
label | - | stringA visually hidden label read by screen readers. |
as? | - | "button" |
type? | - | "button" | "submit" | "reset" |
icon | - | ElementType<IconProps> |
size? | - | ResponsiveProp<"sm" | "md" | "xs">Defines the size of the button |
variant? | - | "primary" | "secondary" | "tertiary" | "ghost" | "white"Sets the style variant of the button |
isDisabled? | - | booleanIf |