COMPONENTS

Button

Buttons are one of the crucial elements of a user interface. They are used to initiate actions and can have varying importance based on the need.

Usage
Code
Content

Types


Basic

Basic button is used the most across products. It provides a lightweight button style while still maintaining affordability.

Primary

Primary button highlights the primary action on a page. Preferably have only one primary action per page. If you think more than one primary action is needed, try to re-evaluate the priority of actions.

Alert

Alert button indicates destructive actions on a page, in dialogs, or in settings.

Transparent

Transparent button indicates actions that are less important or less frequent.

Expanded

Expanded button is used when the width of the button needs to match the parent. Use it sparingly as it takes a lot of space and attention.

Icon with Label

Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it.

Icon in Right