Button

In progress
ARIA
RTL

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

Default

Button as a link HTML element

Variants

Sizes

Icons

Full width

Disabled

Animations

Button props

NameTypeRequiredDefaultDescription
animation'progress' | 'success' | 'error' | 'pulse' | booleanNo-Animation of button
asa | buttonNobuttonRendered HTML element
childrenReact.ReactNode;No-Children content
disabledbooleanNofalseDisabled button
fullWidthbooleanNofalseFull width button
iconLeftJSX.ElementNo-Left icon
iconRightJSX.ElementNo-Right icon
sizexs | sm | md | lg | xlNomdSize of button
variantprimary | secondary | tertiary | ghostNoprimaryVisual/Logical variant of button