Button

Displays a single important action a user can take.

RepositoryStorybook

Design

Overview

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs, Forms, Toolbars, etc. Buttons help users to perform tasks or trigger processes.

Do's

• Apply the same width of the container for all buttons when they are in a group.
• Use only one primary button and two of the same lower emphasis when in the button group.
• Maintain the same style about using or not an icon with the label text in the button group.

Don'ts

• Do not use two primary buttons in a button group.
• Do not use buttons with icons and buttons without icons in a button group.
• Do not have more than one primary action.
• Do not pair a solid primary and solid destructive button - one must take precedence over the other.
• Do not use buttons with icons only (in case this is impossible please always add text for a tooltip and an aria label as they are needed to meet accessible requirements)

Anatomy

Variants

Buttons come in three sizes (large, medium, small) and four types (primary, secondary, action, destructive).

Primary

Use for the primary action in a view or dialog.

Secondary

Use for secondary actions in a view or dialog.

Action

Use for actions that are not the primary action in a view or dialog.

Destructive

Use for actions that are destructive, such as deleting an item.

React

Usage

To implement Button component into your project you’ll need to add the import:

import { Button } from '@shoptet/design-system';

After adding import into your project you can use it simply like:

<Button>Hello World!</Button>

Single Story

Live Example

Live Editor

<Button>Click me!</Button>

Result

Loading...

Storybook Docs