Button actions¶
Overview¶
Contained buttons¶
Call-to-action (CTA)¶
A Call-to-action (CTA) button, depending on the situation, will usually prompt users to sign up/register/buy now/etc.
<button type="button" class="primary radius">Call to action button</button>
Primary button¶
Use this one as the main call to action on interfaces.
<button type="button" class="primary">Primary button</button>
Secondary button¶
For secondary actions. Great at keeping the eye focused on a page’s primary imagery. With properly chosen background and well-outlined contrasting border secondary button attracts attention without giving a user overwhelming impression.
<button type="button" class="secondary">Secondary button</button>
Tertiary button¶
Use tertiary buttons in isolation, for less prominent actions, or paired with a Primary or Secondary button, or multiple CTAs around the same subject.
<button type="button" class="tertiary">Tertiary button</button>
Outlined buttons¶
Outlined buttons display a stroke around a text label.
CTA Outline Primary Outline Secondary Outline Tertiary Outline Danger Outline Info Outline Success Outline Warning Outline
<button type="button" class="primary-outline radius">CTA Outline</button>
<button type="button" class="primary-outline">Primary Outline</button>
<button type="button" class="secondary-outline">Secondary Outline</button>
<button type="button" class="tertiary-outline">Tertiary Outline</button>
<button type="button" class="danger-outline">Danger Outline</button>
<button type="button" class="info-outline">Info Outline</button>
<button type="button" class="success-outline">Success Outline</button>
<button type="button" class="warning-outline">Warning Outline</button>