Buttons

Buttons allow users to take actions and make choices, with a single click.

Icon for component-button

Primary Button

The Primary Button description from Figma goes here

1<button class="btn btn-primary">Primary Button</button>
Icon for copy

Secondary Button

The Secondary Button description from Figma goes here

1<button class="btn btn-secondary">Secondary Button</button>
Icon for copy

Custom Type Button

The Outline Danger Button description from Figma goes here

1<button class="btn btn-custom-type">Warning Button</button>
Icon for copy

Danger Button

The Danger Button description from Figma goes here

1<button class="btn btn-danger">Danger Button</button>
Icon for copy

Dark Button

The Dark Button description from Figma goes here

1<button class="btn btn-dark">Dark Button</button>
Icon for copy

Large Button

1<button class="btn btn-primary btn-lg">Button text</button>
Icon for copy

Light Button

The Light Button description from Figma goes here

1<button class="btn btn-light">Light Button</button>
Icon for copy

Medium Button

1<button class="btn btn-primary btn-md">Button text</button>
Icon for copy

Outline Secondary Button

The Outline Secondary Button description from Figma goes here

1<button class="btn btn-outline-secondary">Outline Button</button>
Icon for copy

Small Button

1<button class="btn btn-primary btn-sm">Button text</button>
Icon for copy

Accessibility

Make it clear what this button does for the user.

DO

  • Make it clear what this button does for the user.

  • Use at most two buttons in one group.

  • Attribute indicating if the element should be.

DON'T

  • Use more than two words for call to action.

  • First letter of each sentence defaults to a capital letter.

  • Attribute indicating if the element should be.


Classes

Complete list of all CSS classes for the component.

NameClass
Primary Buttonbutton button-primary
Secondary Buttonbutton button-secondary
Custom Type Buttonbutton button-custom-type
Danger Buttonbutton button-danger
Dark Buttonbutton button-dark
Large Buttonbutton button-large
Light Buttonbutton button-light
Medium Buttonbutton button-medium
Outline Secondary Buttonbutton button-outline-secondary
Small Buttonbutton button-small