Button guide

There are mainly five types of buttons, all represented below. All buttons can be configured to appear as pills, be fluid and are sizable.

Base button

• Documentation
• stylable (via the tw-props)
• serves as a base button for the other button types

Primary button

• Documentation
• denotes the primary action on the page (or current context)
• can be used together with SecondaryButton
• Use the prop 'variant' to specify what type of button to use. variant: 'blue' (default) | 'haiti' | 'yellow' | 'white'
• not styleable
• use sparingly!

Square button

IconButton

• Documentation

Secondary button

• Documentation
• can be used together with PrimaryButton
• Use the prop 'variant' to specify what type of button to use. variant: 'blue' (default) | 'haiti'
• not styleable

Tertiary Button

• Documentation
• can be used together with SecondaryButton
• Use the prop 'variant' to specify what type of button to use. variant: 'blue' (default) | 'haiti'
• not styleable

Payment button

• Documentation
• "clicking this button will resolve the current actionable"
• typically used in a payment context
• Has a PaymentButtonSecondary variant
• not styleable

Destructive button

• Documentation

• use when action has a destructive or non-revertible operation

• typical usage includes delete/remove or cancel operations

• Has a DestructiveButtonSecondary variant

• not styleable

• Documentation