Icon Button
The IconButton component provides a versatile and customizable button that integrates seamlessly with icons, offering various sizes, shapes, and visual variants to match your design needs. This component supports multiple icon styles and ensures accessibility with options for alt text. Whether you're looking for a subtle interaction with the ghost variant or a more prominent action button, the IconButton is designed to be both flexible and easy to implement in your UI. It also includes props for rounding, disabling, and customizing button styles, making it ideal for a wide range of use cases.
Basic Icon Button
1<IconButton variant="default" alt="Default">
2 Default
3</IconButton>Icon Button API Reference
Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
children | React.ReactNode | - |
alt | string | - |
size | string | default |
variant | string | default |
disabled | boolean | false |
* Required | ||
Prop | Types |
|---|---|
rounded | default none large |
size | default small large |
variant | default secondary warning success info error ghost custom |
Disabled Icon Button
1<IconButton variant="default" disabled>
2 <Zap className="w-5 h-5" />
3</IconButton>Icon Button - Sizes
1<IconButton variant="default" size="small">
2 <Zap className="w-3 h-3" />
3</IconButton>
4<IconButton variant="default" size="default">
5 <Zap className="w-5 h-5" />
6</IconButton>
7<IconButton variant="default" size="large">
8 <Zap className="w-7 h-7 " />
9</IconButton>Icon Button - Rounded Edges
1<IconButton variant="default" rounded="none">
2 <Zap className="w-5 h-5" />
3</IconButton>
4<IconButton variant="default" rounded="default">
5 <Zap className="w-5 h-5" />
6</IconButton>
7<IconButton variant="default" rounded="large">
8 <Zap className="w-5 h-5" />
9</IconButton>Icon Button - Style Variants
Secondary Variant
1<IconButton variant="secondary" >
2 <Zap className="w-5 h-5" />
3</IconButton>Error Variant
1<IconButton variant="error" >
2 <Zap className="w-5 h-5" />
3</IconButton>Warning Variant
1<IconButton variant="warning" >
2 <Zap className="w-5 h-5" />
3</IconButton>Success Variant
1<IconButton variant="success" >
2 <Zap className="w-5 h-5" />
3</IconButton>Info Variant
1<IconButton variant="info" >
2 <Zap className="w-5 h-5" />
3</IconButton>Ghost Variant
1<IconButton variant="info" >
2 <Zap className="w-5 h-5" />
3</IconButton>