Generic Button

This component has 3 variants.

Primary – English

Preview

Rendered HTML

<button class="button button--primary">
  <span class="button__text">Submit this form</span>
</button>

Template

<button class="button button--primary">
  <span class="button__text">{{ text }}</span> 
</button>

Primary – French

Preview

Rendered HTML

<button class="button button--primary">
  <span class="button__text">Envoyer ce formulaire</span>
</button>

Template

<button class="button button--primary">
  <span class="button__text">{{ text }}</span> 
</button>

Secondary – English

Preview

Rendered HTML

<button class="button button--secondary">
  <span class="button__text">Undo changes</span>
</button>

Template

<button class="button button--secondary">
  <span class="button__text">{{ text }}</span> 
</button>

Secondary – French

Preview

Rendered HTML

<button class="button button--secondary">
  <span class="button__text">Annuler les changements</span>
</button>

Template

<button class="button button--secondary">
  <span class="button__text">{{ text }}</span> 
</button>

Next – English

Preview

Rendered HTML

<button class="button button--next">
  <span class="button__text">Go to the next step</span> <span>➜</span>
</button>

Template

<button class="button button--next">
  <span class="button__text">{{ text }}</span> <span>➜</span>
</button>

Next – French

Preview

Rendered HTML

<button class="button button--next">
  <span class="button__text">Passer à l&#39;étape suivante</span> <span>➜</span>
</button>

Template

<button class="button button--next">
  <span class="button__text">{{ text }}</span> <span>➜</span>
</button>
Omakase