Button

Large primary button

= link_to("#", class: "btn-primary") do
  | Hello

|  

= link_to("#", class: "btn-primary") do
  i.ph-arrow-right-bold
  | Hello

br
br

= button_to("Désactivé", {}, class: "btn-primary", disabled: :disabled)

br

= button_to("Passe en pleine largeur en mobile", {}, class: "btn-primary btn-block-xs")

br

= link_to("#", class: "btn-bleu") do
  i.ph-paper-plane-tilt
  | Bleu

|  

= link_to("#", class: "btn-rouge") do
  i.ph-paper-plane-tilt
  | Rouge

|  

= link_to("#", class: "btn-jaune") do
  i.ph-paper-plane-tilt
  | Jaune

|  

= link_to("#", class: "btn-vert") do
  i.ph-paper-plane-tilt
  | Vert

|  

= link_to("#", class: "btn-blanc") do
  i.ph-paper-plane-tilt
  | Blanc

|  

= link_to("#", class: "btn-turquoise") do
  i.ph-paper-plane-tilt
  | Turquoise

Small primary button

= link_to("#", class: "btn-primary btn-small") do
  | Hello

|  

= link_to("#", class: "btn-primary btn-small") do
  i.ph-arrow-right-bold
  | Hello

br
br

= button_to("Désactivé", {}, class: "btn-primary btn-small", disabled: :disabled)

br

= button_to("Passe en pleine largeur en mobile", {}, class: "btn-primary btn-small btn-block-xs")

br

= link_to("#", class: "btn-bleu btn-small") do
  i.ph-paper-plane-tilt
  | Bleu

|  

= link_to("#", class: "btn-rouge btn-small") do
  i.ph-paper-plane-tilt
  | Rouge

|  

= link_to("#", class: "btn-jaune btn-small") do
  i.ph-paper-plane-tilt
  | Jaune

|  

= link_to("#", class: "btn-vert btn-small") do
  i.ph-paper-plane-tilt
  | Vert

|  

= link_to("#", class: "btn-blanc btn-small") do
  i.ph-paper-plane-tilt
  | Blanc

|  

= link_to("#", class: "btn-turquoise btn-small") do
  i.ph-paper-plane-tilt
  | Turquoise

Secondary button

div.m-1
  a.btn-secondary href="#"
    | Hello

  |  

  a.btn-secondary.icon-right href="#"
    | Hello
    i.ph-download-simple-bold

div.m-1
  a.btn-secondary href="#"
    i.ph-download-simple-bold

div.m-1
  a.btn-secondary-rouge href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-jaune href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-vert href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-turquoise href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-bleu href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-blanc href="#"
    i.ph-download-simple-bold

.box.box-bg-bleu
  div
    a.btn-secondary-rouge href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-jaune href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-vert href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-turquoise href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-bleu href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-blanc href="#"
      i.ph-download-simple-bold

Secondary button reverse

div.m-1
  a.btn-secondary.btn-secondary--reverse href="#"
    | Hello

  |  

  a.btn-secondary.btn-secondary--reverse.icon-right href="#"
    | Hello
    i.ph-download-simple-bold

div.m-1
  a.btn-secondary.btn-secondary--reverse href="#"
    i.ph-download-simple-bold

div.m-1
  a.btn-secondary-rouge.btn-secondary-rouge--reverse href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-jaune.btn-secondary-jaune--reverse href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-vert.btn-secondary-vert--reverse href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-turquoise.btn-secondary-turquoise--reverse href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-bleu.btn-secondary-bleu--reverse href="#"
    i.ph-download-simple-bold

  |  

  a.btn-secondary-blanc.btn-secondary-blanc--reverse href="#"
    i.ph-download-simple-bold

.box.box-bg-bleu
  div
    a.btn-secondary-rouge.btn-secondary-rouge--reverse href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-jaune.btn-secondary-jaune--reverse href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-vert.btn-secondary-vert--reverse href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-turquoise.btn-secondary-turquoise--reverse href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-bleu.btn-secondary-bleu--reverse href="#"
      i.ph-download-simple-bold

    |  

    a.btn-secondary-blanc.btn-secondary-blanc--reverse href="#"
      i.ph-download-simple-bold

Tabs

.tab-container
  a.step-button.tab-button.active href="#"
    span.circle.mr-1
      | 1
    | Step 1
  .ml-2.mr-2.flex-align-center.flex-justify-center
    i.ph-caret-right-bold.sm-disabled
    i.ph-caret-down-bold.lg-disabled
  a.step-button.tab-button.inactive.border-tab href="#"
    span.circle.mr-1
      | 2
    | Step 2

Links

a.link-underline href="#"
  | Hello

br
br

a.link href="#"
  i.ph-arrow-right-bold
  | Hello

Comportement responsive bouton

On peut ajouter la classe .btn-block-xs ou .btn-block-sm si on veut qu'un bouton utilise tout l'espace en mobile ou en tablette.

= link_to "#", class: "btn-secondary btn-block-sm" do
  span.mr-1
    | Télécharger
  i.ph-box-arrow-down

br
br

= link_to "#", class: "btn-secondary btn-block-xs" do
  span.mr-1
    | Télécharger
  i.ph-archive-box