Buttons Component

The button component is used to trigger actions or navigate to different pages within an application or an interface. It provides a clear call-to-action, enabling users to interact with the system effectively.

Component Variants

Primary Button

The Primary Button represents the most important action on a page or within a component. It should stand out clearly, drawing the user's attention to the critical task or call-to-action.

Usage Example
Can be used on landing page, the primary button might be “Start Form” or “Login to Banking”.

[example image]

Secondary Button

Secondary Buttons are used for actions that are important but not as critical as those assigned to Primary Buttons. They act as alternative actions to the main call-to-action or as complementary actions on a page.

Usage example
Can be used for alternative action or supportive actions

[example image]

Tertiary Button

Tertiary Buttons are used for less prominent actions or secondary pathways. They are often used when space is limited or when the action is of lesser importance, but still needs to be accessible.

Usage example
Can be used in components where actions like “Edit”, “View”, or “Skip” are needed without taking up much space

[example image]

Links and Text Buttons

Links and text-based actions are used for navigational purposes or to perform inline actions that don’t require the visual weight of a button. They are usually embedded in text and are the least visually prominent of the interactive elements.

Usage
Can be used for hyperlinks within content to guide users to other pages or sections

[example image]

Visual Representation

[Show an image or embed a Figma frame/screenshot of each button style.]

Component States

Default State

The standard appearance of the button.

[example image]

Hover State

The appearance when the user hovers over the button.

[example image]

Active/Pressed State

The appearance when the button is clicked or pressed.

[example image]

Disabled State

How the button appears when it's not interactive.

[example image]

Loading State

How the button looks when an action is in progress.

[example image]

Focus State

The appearance when the button is focused, usually via keyboard navigation.

[example image]

Component Size Variant

Large Button

Used for actions that need to stand out more or when there is more space available.

Medium Button

Default size used in most cases.

Small Button

Used when space is limited or the action is of lesser importance.

Visual Representation

[Show an image or embed a Figma frame/screenshot of each button size.]

Icon Presence/Location

Button with Icon

Icon Left

[body copy]

Icon Right

[body copy]

Icon Only

[body copy]

Modes

Light Mode

[body copy]

Dark Mode

[body copy]

Visual Representation

[Show an image or embed a Figma frame/screenshot of each mode]

Changelog