Resa Design System

Appearance

Buttons ​

v-0.0.0

Primary ​

Primary btn link
html
<div class="cta__container mt--2">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary btn
    </button>
    <a class="cta__btn--primary"
        title="Title of btn"
        href="#">
        Primary btn link
    </a>
</div>

Use case ​

Do

  • Use it for actions of priority 1
  • Use it to validate a form

Don't

  • Use it in navigation menu.
  • Use multiple primary in the same zone.

Secondary ​

Secondary btn link
html
<div class="cta__container mt--2">
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary btn
    </button>
    <a class="cta__btn--secondary"
        title="Title of btn"
        href="#">
        Secondary btn link
    </a>
</div>

Use case ​

Do

  • Use it for actions of priority 2
  • Use it for a return button of a form
  • Use it next to a primary button

Don't

  • Use it if not near a primary

Icon management ​

Default icon ​

html
<button class="cta__btn--primary icon__btn--start" title="Title of btn">
    Primary icon
</button>
html
<button class="cta__btn--primary icon__btn--end" title="Title of btn">
    Primary icon
</button>
html
<button class="cta__btn--secondary icon__btn--start" title="Title of btn">
    Secondary icon
</button>
html
<button class="cta__btn--secondary icon__btn--end" title="Title of btn">
    Secondary icon
</button>

Custom icon ​

html
<button class="cta__btn--primary icon__btn--start--add" title="Title of btn">
    Primary icon add
</button>
html
<button class="cta__btn--primary icon__btn--end--avatar" title="Title of btn">
    Primary icon avatar
</button>
html
<button class="cta__btn--secondary icon__btn--start--download" title="Title of btn">
    Secondary icon download
</button>
html
<button class="cta__btn--secondary icon__btn--end--delete" title="Title of btn">
        
    Secondary icon delete
</button>

Animated icon ​

html
<button class="cta__btn--primary icon__btn--start" title="Title of btn">
    Primary icon
</button>
html
<button class="cta__btn--primary icon__btn--end" title="Title of btn">
    Primary icon
</button>
html
<button class="cta__btn--secondary icon__btn--start" title="Title of btn">
    Secondary icon
</button>
html
<button class="cta__btn--secondary icon__btn--end" title="Title of btn">
    Secondary icon
</button>

Special cases ​

MyRESA ​

html
<button class="cta__btn--myresa" title="Go to MyResa">
    <span class="srOnly">
        MyRESA
    </span>
</button>

Itsme ​

html
<button class="cta__btn--itsme" title="Title of btn">
    S'identifier avec Itsme
</button>

CTA container ​

Default ​

html
<div class="cta__container">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>
html
<div class="cta__container--right">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Center ​

html
<div class="cta__container--center">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Spaced ​

html
<div class="cta__container--spaced">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Fill ​

html
<div class="cta__container--fill">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Stack default ​

html
<div class="cta__container--stack">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Stack right ​

html
<div class="cta__container--right--stack">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Stack center ​

html
<div class="cta__container--center--stack">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>

Stack fill ​

html
<div class="cta__container--fill--stack">
    <button class="cta__btn--primary"
            title="Title of btn">
        Primary icon
    </button>
    <button class="cta__btn--secondary"
            title="Title of btn">
        Secondary icon
    </button>
</div>