Button - Astridd

Overview

Buttons are convenient tools when you need more traditional actions. Astridd has many easy to use button styles that you can customize or override to fit your needs.

Examples

Flat variation

<button aria-label="..." class="btn btn--primary" role="button">Primary flat button</button>
<button aria-label="..." class="btn btn--secondary" role="button">Secondary flat button</button>
<button aria-label="..." class="btn btn--tertiary" role="button">Tertiary flat button</button>
<button aria-label="..." class="btn btn--mono" role="button">Mono flat button</button>

Bordered variation

<button aria-label="..." class="btn btn--bordered-primary" role="button">Primary bordered button</button>
<button aria-label="..." class="btn btn--bordered-secondary" role="button">Secondary bordered button</button>
<button aria-label="..." class="btn btn--bordered-tertiary" role="button">Tertiary bordered button</button>
<button aria-label="..." class="btn btn--bordered-mono" role="button">Mono bordered button</button>

Group variation

<div class="btn-group">
  <button aria-label="..." class="btn btn--primary" href="#" role="button">Primary flat button</button>
  <button aria-label="..." class="btn btn--bordered-secondary" href="#" role="button">Secondary bordered button</button>
</div>

Usage guidelines

Dos	Donts
Do ensure button labels are short and concise.	Don’t use overly long button labels that are difficult to read.
Do ensure button labels clearly explain the click action.	Don’t create button labels that are vague and don't explain the click action.
Do use a single primary action throughout a single view.	Don’t use multiple primary actions in a single view.
	Don’t place a button below another button if there is space to place them side by side.

Implementation guidelines

Name	Class	Attribute	Description
Flat variations	`.btn--primary` `.btn--secondary` `.btn--tertiary` `.btn--mono`		Flat variations for buttons.
Bordered variations	`.btn--bordered-primary` `.btn--bordered-secondary` `.btn--bordered-tertiary` `.btn--bordered-mono`		Bordered variations for buttons.
Display	`.btn--block`		Span the full width of a parent container.
State	`.btn--disabled`	`disabled`	Fade button styling and prevent button click.
Group	`.btn-group`		Display a group of Buttons in a line. Stacks vertically on smaller devices. Apply to a containing element.