In progress

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


Button as link html element




Full width



Multi line

Multiline button exists in XL size only. Please copy and paste the code below to see the result.


Button props
Name Type Required Default Description
id string No - Id attribute for DOM element
rel string No - Rel attribute for DOM element
target string No - Target attribute for DOM element
aria_label string No - Aria label attribute for DOM element
attrs keyword No [] Additional attributes for DOM element
testid string No - Data-testid attribute for DOM element
right_icon string No - Right icon
left_icon string No - Left icon
value string No - Value attribute for DOM element
values keyword No [] list of additional values to associate with the DOM element
on_click event No - On click event
form string No - Form attribute for DOM element
type string No "button" Type attribute for DOM element
hover_bg_class css_class No - Additional Tailwind classes for hover background
class css_class No - Additional Tailwind classes
animation progress | success | error | pulse No - Animation of button
disabled boolean No - Disabled button
full_width boolean No - Full width button
href string No - A href attribute when prop as="a"
as a | button No "button" Rendered HTML element
size xs | sm | md | lg | xl No "md" Size of button
variant fill | outline | ghost No "fill" Visual/Logical variant of button
default slot No - Inner content of the component
right_icon_slot slot No - Right icon slot
left_icon_slot slot No - Left icon slot