IconButton
Buttons allow users to take actions, and make choices, with a single tap.
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
- Modal windows
- Forms
- Cards
- Toolbars

Default
Variants
Sizes
Disabled
Animation
Customization
Button.IconButton props
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for DOM element |
variant | fill | outline | ghost | primary | secondary | tertiary | No | "fill" | Visual/Logical variant of button. Please use "fill", "outline", "ghost" instead of "primary", "secondary", "tertiary" |
size | xs | sm | md | lg | xl | No | "md" | Size of button |
as | a | button | No | "button" | Rendered HTML element |
href | string | No | - | A href attribute when prop as="a" |
disabled | boolean | No | - | Disabled button |
animation | progress | success | error | pulse | No | - | Animation of button |
class | css_class | No | - | Additional Tailwind classes |
icon_only | string | No | - | Icon. To be deprecated. Use prop "icon" instead. |
icon | string | No | - | Icon |
hover_bg_class | css_class | No | - | Additional Tailwind classes for hover background |
type | string | No | "button" | Type attribute for DOM element |
form | string | No | - | Form attribute for DOM element |
on_click | event | No | - | On click event |
values | keyword | No | [] | list of additional values to associate with the DOM element |
value | string | No | - | Value attribute for DOM element |
testid | string | No | - | Data-testid attribute for DOM element |
attrs | keyword | No | [] | Additional attributes for DOM element |
aria_label | string | No | - | Aria label attribute for DOM element |
target | string | No | - | Target attribute for DOM element |
rel | string | No | - | Rel attribute for DOM element |
default | slot | No | - | Slot for customizations |