title: Button
name: button
# wrapper: 'bg-dark'
variants:
  - name: states
    title: Primary states preview
    notes: |
      *For previewing purposes only. **Do not use in production!***
  - name: sizes
    title: Sizes preview
    notes: |
      You can use **4 different sizes**:
      * **Small**: is suitable for an area where you don’t have many space to display a button.
      * **Normal**: is the default size.
      * **Large**: use with caution. This button draws people’s attention, leaving the rest of the content aside.
      * **Block**: using all available width. Useful on mobile, when you want action to end a block (submit a form for instance).
  - name: secondary
    title: Button secondary
    notes: |
      Less important actions use secondary-style buttons. Two regular cases: give hierarchy next to a primary-style button ; for groups of buttons. Like in the footer for instance.
  - name: secondary-states
    title: Secondary states preview
    notes: |
      *For previewing purposes only. **Do not use in production!***
  - name: tertiary
    title: Button tertiary
    notes: |
      For less aggressive buttons that are still in line with the EPFL graphic charter.
  - name: tertiary-states
    title: Tertiary states preview
    notes: |
      *For previewing purposes only. **Do not use in production!***
notes: |
  Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people.

  ### Button primary
  Main action in a page uses primary-style buttons. If you have more than one button in a page, **give hierarchy** to those different actions. You can use secondary button style or turn it into a link.