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 |