Skip to main content

Button

Buttons are clickable elements used for performing interface actions. Button labels let users know what will happen next.

note

Buttons are not links and should not be used for navigation. Buttons do something, links go somewhere. When you want to navigate a user to another page or website, use a link.

Appearance​

Primary​

Use a primary button variant to indicate the strongest call to action on a page. Primary buttons should appear only once per section. Not every page needs a primary button.

http://localhost:3000
<Button variant="primary">Primary button</Button>

Secondary​

The secondary button should be the default button variant for most use cases.

http://localhost:3000
<Button variant="secondary">Secondary button</Button>

Tertiary​

Use a tertiary button to deprioritize actions when placed next to secondary or primary buttons. Tertiary buttons may also be used to lessen visual distraction when a multitude of similar actions are being used, or when the button exists inside an element with little spacing.

For example, a table that includes a download button in each row should use the tertiary variant.

http://localhost:3000
<Button variant="tertiary">Tertiary button</Button>

Danger​

The danger variant is used to indicate an action that is destructive and cannot be undone.

http://localhost:3000
<Button variant="danger">Danger button</Button>

Brand​

Use a brand button variant for project44 specific marketing moments. This should be used sparingly.

http://localhost:3000
<Button variant="brand">Brand button</Button>

States​

Disabled​

Use the isDisabled prop to disable a button that isn’t usable. Disabled buttons present a number of accessibility issues, particularly in forms, so they should be used sparingly.

http://localhost:3000
<Button isDisabled>Button</Button>

Sizing​

Small​

Set the button size to small when vertical spacing is limited, like inside a table row.

http://localhost:3000
<Button size="small">Button</Button>

Icons​

Start Icon​

Use startIcon to include icon before the button label.

http://localhost:3000
<Button startIcon={<Add />}>Create template</Button>

End Icon​

Use endIcon to include an icon after the button label. End icons should be used to imply directionality to the button's action, like traversing pages in a table or revealing a menu under the button.

http://localhost:3000
<Button variant="tertiary" endIcon={<ChevronRight />}>Next page</Button>

Common configurations​

Create a dropdown button by adding the ChevronDown icon at the end.

http://localhost:3000
<Button variant="secondary" endIcon={<ChevronDown />}>Select an item</Button>

Content guidelines​

Button labels should be concise and predictable. A user should understand what action will take place after clicking the button. When writing labels, start with a verb to imply action and add context with a supportive noun.

Correct

View shipments

Incorrect

Shipments list

caution

Do not rely on an icon to stand in as a label's verb.

Sentence case​

Use sentence case, not title case, when writing button labels. Capitalize only the first word in a string, as well as any other words that require capitalization, like proper nouns, initialisms, or acronyms.

We use sentence case because it's more conversational and makes it easier for users to distinguish between common nouns and proper nouns.

Correct

Sign up

Incorrect

Sign Up

Brevity​

Don't use long, redundant button labels and avoid unnecessary articles such as "a", "an", or "the" for a more concise label.

Correct

Create user

Incorrect

Click here to create a new user

Props​

as?The root element to be rendered