Alain Afflelou Design System

Buttons: Classic 

<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary / Extra Small -->
    <button type="button" class=" btn btn-primary btn-size-xs">
        Label text

    </button>
    <!-- primary / Small -->
    <button type="button" class=" btn btn-primary btn-size-sm">
        Label text

    </button>
    <!-- primary / Default -->
    <button type="button" class=" btn btn-primary ">
        Label text

    </button>
    <!-- primary / Medium -->
    <button type="button" class=" btn btn-primary btn-size-md">
        Label text

    </button>
    <!-- primary / Large -->
    <button type="button" class=" btn btn-primary btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary-subtle / Extra Small -->
    <button type="button" class=" btn btn-primary-subtle btn-size-xs">
        Label text

    </button>
    <!-- primary-subtle / Small -->
    <button type="button" class=" btn btn-primary-subtle btn-size-sm">
        Label text

    </button>
    <!-- primary-subtle / Default -->
    <button type="button" class=" btn btn-primary-subtle ">
        Label text

    </button>
    <!-- primary-subtle / Medium -->
    <button type="button" class=" btn btn-primary-subtle btn-size-md">
        Label text

    </button>
    <!-- primary-subtle / Large -->
    <button type="button" class=" btn btn-primary-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary-ghost / Extra Small -->
    <button type="button" class=" btn btn-primary-ghost btn-size-xs">
        Label text

    </button>
    <!-- primary-ghost / Small -->
    <button type="button" class=" btn btn-primary-ghost btn-size-sm">
        Label text

    </button>
    <!-- primary-ghost / Default -->
    <button type="button" class=" btn btn-primary-ghost ">
        Label text

    </button>
    <!-- primary-ghost / Medium -->
    <button type="button" class=" btn btn-primary-ghost btn-size-md">
        Label text

    </button>
    <!-- primary-ghost / Large -->
    <button type="button" class=" btn btn-primary-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-primary btn-size-xs">
        Label text

    </button>
    <!-- primary-disabled / Small -->
    <button type="button" disabled class=" btn btn-primary btn-size-sm">
        Label text

    </button>
    <!-- primary-disabled / Default -->
    <button type="button" disabled class=" btn btn-primary ">
        Label text

    </button>
    <!-- primary-disabled / Medium -->
    <button type="button" disabled class=" btn btn-primary btn-size-md">
        Label text

    </button>
    <!-- primary-disabled / Large -->
    <button type="button" disabled class=" btn btn-primary btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary-subtle-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-primary-subtle btn-size-xs">
        Label text

    </button>
    <!-- primary-subtle-disabled / Small -->
    <button type="button" disabled class=" btn btn-primary-subtle btn-size-sm">
        Label text

    </button>
    <!-- primary-subtle-disabled / Default -->
    <button type="button" disabled class=" btn btn-primary-subtle ">
        Label text

    </button>
    <!-- primary-subtle-disabled / Medium -->
    <button type="button" disabled class=" btn btn-primary-subtle btn-size-md">
        Label text

    </button>
    <!-- primary-subtle-disabled / Large -->
    <button type="button" disabled class=" btn btn-primary-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- primary-ghost-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-primary-ghost btn-size-xs">
        Label text

    </button>
    <!-- primary-ghost-disabled / Small -->
    <button type="button" disabled class=" btn btn-primary-ghost btn-size-sm">
        Label text

    </button>
    <!-- primary-ghost-disabled / Default -->
    <button type="button" disabled class=" btn btn-primary-ghost ">
        Label text

    </button>
    <!-- primary-ghost-disabled / Medium -->
    <button type="button" disabled class=" btn btn-primary-ghost btn-size-md">
        Label text

    </button>
    <!-- primary-ghost-disabled / Large -->
    <button type="button" disabled class=" btn btn-primary-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio / Extra Small -->
    <button type="button" class=" btn btn-audio btn-size-xs">
        Label text

    </button>
    <!-- audio / Small -->
    <button type="button" class=" btn btn-audio btn-size-sm">
        Label text

    </button>
    <!-- audio / Default -->
    <button type="button" class=" btn btn-audio ">
        Label text

    </button>
    <!-- audio / Medium -->
    <button type="button" class=" btn btn-audio btn-size-md">
        Label text

    </button>
    <!-- audio / Large -->
    <button type="button" class=" btn btn-audio btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio-subtle / Extra Small -->
    <button type="button" class=" btn btn-audio-subtle btn-size-xs">
        Label text

    </button>
    <!-- audio-subtle / Small -->
    <button type="button" class=" btn btn-audio-subtle btn-size-sm">
        Label text

    </button>
    <!-- audio-subtle / Default -->
    <button type="button" class=" btn btn-audio-subtle ">
        Label text

    </button>
    <!-- audio-subtle / Medium -->
    <button type="button" class=" btn btn-audio-subtle btn-size-md">
        Label text

    </button>
    <!-- audio-subtle / Large -->
    <button type="button" class=" btn btn-audio-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio-ghost / Extra Small -->
    <button type="button" class=" btn btn-audio-ghost btn-size-xs">
        Label text

    </button>
    <!-- audio-ghost / Small -->
    <button type="button" class=" btn btn-audio-ghost btn-size-sm">
        Label text

    </button>
    <!-- audio-ghost / Default -->
    <button type="button" class=" btn btn-audio-ghost ">
        Label text

    </button>
    <!-- audio-ghost / Medium -->
    <button type="button" class=" btn btn-audio-ghost btn-size-md">
        Label text

    </button>
    <!-- audio-ghost / Large -->
    <button type="button" class=" btn btn-audio-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-audio btn-size-xs">
        Label text

    </button>
    <!-- audio-disabled / Small -->
    <button type="button" disabled class=" btn btn-audio btn-size-sm">
        Label text

    </button>
    <!-- audio-disabled / Default -->
    <button type="button" disabled class=" btn btn-audio ">
        Label text

    </button>
    <!-- audio-disabled / Medium -->
    <button type="button" disabled class=" btn btn-audio btn-size-md">
        Label text

    </button>
    <!-- audio-disabled / Large -->
    <button type="button" disabled class=" btn btn-audio btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio-subtle-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-audio-subtle btn-size-xs">
        Label text

    </button>
    <!-- audio-subtle-disabled / Small -->
    <button type="button" disabled class=" btn btn-audio-subtle btn-size-sm">
        Label text

    </button>
    <!-- audio-subtle-disabled / Default -->
    <button type="button" disabled class=" btn btn-audio-subtle ">
        Label text

    </button>
    <!-- audio-subtle-disabled / Medium -->
    <button type="button" disabled class=" btn btn-audio-subtle btn-size-md">
        Label text

    </button>
    <!-- audio-subtle-disabled / Large -->
    <button type="button" disabled class=" btn btn-audio-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- audio-ghost-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-audio-ghost btn-size-xs">
        Label text

    </button>
    <!-- audio-ghost-disabled / Small -->
    <button type="button" disabled class=" btn btn-audio-ghost btn-size-sm">
        Label text

    </button>
    <!-- audio-ghost-disabled / Default -->
    <button type="button" disabled class=" btn btn-audio-ghost ">
        Label text

    </button>
    <!-- audio-ghost-disabled / Medium -->
    <button type="button" disabled class=" btn btn-audio-ghost btn-size-md">
        Label text

    </button>
    <!-- audio-ghost-disabled / Large -->
    <button type="button" disabled class=" btn btn-audio-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark / Extra Small -->
    <button type="button" class=" btn btn-dark btn-size-xs">
        Label text

    </button>
    <!-- dark / Small -->
    <button type="button" class=" btn btn-dark btn-size-sm">
        Label text

    </button>
    <!-- dark / Default -->
    <button type="button" class=" btn btn-dark ">
        Label text

    </button>
    <!-- dark / Medium -->
    <button type="button" class=" btn btn-dark btn-size-md">
        Label text

    </button>
    <!-- dark / Large -->
    <button type="button" class=" btn btn-dark btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark-subtle / Extra Small -->
    <button type="button" class=" btn btn-dark-subtle btn-size-xs">
        Label text

    </button>
    <!-- dark-subtle / Small -->
    <button type="button" class=" btn btn-dark-subtle btn-size-sm">
        Label text

    </button>
    <!-- dark-subtle / Default -->
    <button type="button" class=" btn btn-dark-subtle ">
        Label text

    </button>
    <!-- dark-subtle / Medium -->
    <button type="button" class=" btn btn-dark-subtle btn-size-md">
        Label text

    </button>
    <!-- dark-subtle / Large -->
    <button type="button" class=" btn btn-dark-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark-ghost / Extra Small -->
    <button type="button" class=" btn btn-dark-ghost btn-size-xs">
        Label text

    </button>
    <!-- dark-ghost / Small -->
    <button type="button" class=" btn btn-dark-ghost btn-size-sm">
        Label text

    </button>
    <!-- dark-ghost / Default -->
    <button type="button" class=" btn btn-dark-ghost ">
        Label text

    </button>
    <!-- dark-ghost / Medium -->
    <button type="button" class=" btn btn-dark-ghost btn-size-md">
        Label text

    </button>
    <!-- dark-ghost / Large -->
    <button type="button" class=" btn btn-dark-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-dark btn-size-xs">
        Label text

    </button>
    <!-- dark-disabled / Small -->
    <button type="button" disabled class=" btn btn-dark btn-size-sm">
        Label text

    </button>
    <!-- dark-disabled / Default -->
    <button type="button" disabled class=" btn btn-dark ">
        Label text

    </button>
    <!-- dark-disabled / Medium -->
    <button type="button" disabled class=" btn btn-dark btn-size-md">
        Label text

    </button>
    <!-- dark-disabled / Large -->
    <button type="button" disabled class=" btn btn-dark btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark-subtle-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-dark-subtle btn-size-xs">
        Label text

    </button>
    <!-- dark-subtle-disabled / Small -->
    <button type="button" disabled class=" btn btn-dark-subtle btn-size-sm">
        Label text

    </button>
    <!-- dark-subtle-disabled / Default -->
    <button type="button" disabled class=" btn btn-dark-subtle ">
        Label text

    </button>
    <!-- dark-subtle-disabled / Medium -->
    <button type="button" disabled class=" btn btn-dark-subtle btn-size-md">
        Label text

    </button>
    <!-- dark-subtle-disabled / Large -->
    <button type="button" disabled class=" btn btn-dark-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark-ghost-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-dark-ghost btn-size-xs">
        Label text

    </button>
    <!-- dark-ghost-disabled / Small -->
    <button type="button" disabled class=" btn btn-dark-ghost btn-size-sm">
        Label text

    </button>
    <!-- dark-ghost-disabled / Default -->
    <button type="button" disabled class=" btn btn-dark-ghost ">
        Label text

    </button>
    <!-- dark-ghost-disabled / Medium -->
    <button type="button" disabled class=" btn btn-dark-ghost btn-size-md">
        Label text

    </button>
    <!-- dark-ghost-disabled / Large -->
    <button type="button" disabled class=" btn btn-dark-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light / Extra Small -->
    <button type="button" class=" btn btn-light btn-size-xs">
        Label text

    </button>
    <!-- light / Small -->
    <button type="button" class=" btn btn-light btn-size-sm">
        Label text

    </button>
    <!-- light / Default -->
    <button type="button" class=" btn btn-light ">
        Label text

    </button>
    <!-- light / Medium -->
    <button type="button" class=" btn btn-light btn-size-md">
        Label text

    </button>
    <!-- light / Large -->
    <button type="button" class=" btn btn-light btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light-subtle / Extra Small -->
    <button type="button" class=" btn btn-light-subtle btn-size-xs">
        Label text

    </button>
    <!-- light-subtle / Small -->
    <button type="button" class=" btn btn-light-subtle btn-size-sm">
        Label text

    </button>
    <!-- light-subtle / Default -->
    <button type="button" class=" btn btn-light-subtle ">
        Label text

    </button>
    <!-- light-subtle / Medium -->
    <button type="button" class=" btn btn-light-subtle btn-size-md">
        Label text

    </button>
    <!-- light-subtle / Large -->
    <button type="button" class=" btn btn-light-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light-ghost / Extra Small -->
    <button type="button" class=" btn btn-light-ghost btn-size-xs">
        Label text

    </button>
    <!-- light-ghost / Small -->
    <button type="button" class=" btn btn-light-ghost btn-size-sm">
        Label text

    </button>
    <!-- light-ghost / Default -->
    <button type="button" class=" btn btn-light-ghost ">
        Label text

    </button>
    <!-- light-ghost / Medium -->
    <button type="button" class=" btn btn-light-ghost btn-size-md">
        Label text

    </button>
    <!-- light-ghost / Large -->
    <button type="button" class=" btn btn-light-ghost btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-light btn-size-xs">
        Label text

    </button>
    <!-- light-disabled / Small -->
    <button type="button" disabled class=" btn btn-light btn-size-sm">
        Label text

    </button>
    <!-- light-disabled / Default -->
    <button type="button" disabled class=" btn btn-light ">
        Label text

    </button>
    <!-- light-disabled / Medium -->
    <button type="button" disabled class=" btn btn-light btn-size-md">
        Label text

    </button>
    <!-- light-disabled / Large -->
    <button type="button" disabled class=" btn btn-light btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light-subtle-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-light-subtle btn-size-xs">
        Label text

    </button>
    <!-- light-subtle-disabled / Small -->
    <button type="button" disabled class=" btn btn-light-subtle btn-size-sm">
        Label text

    </button>
    <!-- light-subtle-disabled / Default -->
    <button type="button" disabled class=" btn btn-light-subtle ">
        Label text

    </button>
    <!-- light-subtle-disabled / Medium -->
    <button type="button" disabled class=" btn btn-light-subtle btn-size-md">
        Label text

    </button>
    <!-- light-subtle-disabled / Large -->
    <button type="button" disabled class=" btn btn-light-subtle btn-size-lg">
        Label text

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
    <!-- light-ghost-disabled / Extra Small -->
    <button type="button" disabled class=" btn btn-light-ghost btn-size-xs">
        Label text

    </button>
    <!-- light-ghost-disabled / Small -->
    <button type="button" disabled class=" btn btn-light-ghost btn-size-sm">
        Label text

    </button>
    <!-- light-ghost-disabled / Default -->
    <button type="button" disabled class=" btn btn-light-ghost ">
        Label text

    </button>
    <!-- light-ghost-disabled / Medium -->
    <button type="button" disabled class=" btn btn-light-ghost btn-size-md">
        Label text

    </button>
    <!-- light-ghost-disabled / Large -->
    <button type="button" disabled class=" btn btn-light-ghost btn-size-lg">
        Label text

    </button>
</div>
 
{% for color in colors %}
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 {{ 'light' in color.color ? 'relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5' }}">
    {% for size in sizes %}
        <!-- {{ color.name }} / {{ size.name }} -->
        {% include "@template-button" with {
            size: size.size,
            color: color.color,
            type: type,
            disabled: color.disabled,
            label: label
        } %}
    {% endfor %}
</div>
{% endfor %}
 
{
  "label": "Label text",
  "colors": [
    {
      "name": "primary",
      "color": "primary"
    },
    {
      "name": "primary-subtle",
      "color": "primary-subtle"
    },
    {
      "name": "primary-ghost",
      "color": "primary-ghost"
    },
    {
      "name": "primary-disabled",
      "color": "primary",
      "disabled": true
    },
    {
      "name": "primary-subtle-disabled",
      "color": "primary-subtle",
      "disabled": true
    },
    {
      "name": "primary-ghost-disabled",
      "color": "primary-ghost",
      "disabled": true
    },
    {
      "name": "audio",
      "color": "audio"
    },
    {
      "name": "audio-subtle",
      "color": "audio-subtle"
    },
    {
      "name": "audio-ghost",
      "color": "audio-ghost"
    },
    {
      "name": "audio-disabled",
      "color": "audio",
      "disabled": true
    },
    {
      "name": "audio-subtle-disabled",
      "color": "audio-subtle",
      "disabled": true
    },
    {
      "name": "audio-ghost-disabled",
      "color": "audio-ghost",
      "disabled": true
    },
    {
      "name": "dark",
      "color": "dark"
    },
    {
      "name": "dark-subtle",
      "color": "dark-subtle"
    },
    {
      "name": "dark-ghost",
      "color": "dark-ghost"
    },
    {
      "name": "dark-disabled",
      "color": "dark",
      "disabled": true
    },
    {
      "name": "dark-subtle-disabled",
      "color": "dark-subtle",
      "disabled": true
    },
    {
      "name": "dark-ghost-disabled",
      "color": "dark-ghost",
      "disabled": true
    },
    {
      "name": "light",
      "color": "light"
    },
    {
      "name": "light-subtle",
      "color": "light-subtle"
    },
    {
      "name": "light-ghost",
      "color": "light-ghost"
    },
    {
      "name": "light-disabled",
      "color": "light",
      "disabled": true
    },
    {
      "name": "light-subtle-disabled",
      "color": "light-subtle",
      "disabled": true
    },
    {
      "name": "light-ghost-disabled",
      "color": "light-ghost",
      "disabled": true
    }
  ],
  "sizes": [
    {
      "name": "Extra Small",
      "size": "xs"
    },
    {
      "name": "Small",
      "size": "sm"
    },
    {
      "name": "Default"
    },
    {
      "name": "Medium",
      "size": "md"
    },
    {
      "name": "Large",
      "size": "lg"
    }
  ],
  "type": "classic"
}

Button guide

How to use

Template name

template-button

Import

{% render "@template-button" with {...} %}

Examples

{% render "@template-button" with {color: "dark-ghost",size:"sm"} %}

Available props

⚠️ Warning: color topheader is only available for primary background

  • size: xs, sm, default , md, lg | default: default
  • color: primary, audio , light, dark, topheader | default: primary
    • You add -ghost to the color to make it a ghost button
    • You add -subtle to the color to make it a outline button
  • disabled: true, false | default: false
  • type: trailing-icon, leading-icon, only-icon, all-icons, classic | default: classic
  • label: string | default: Label text
  • href: string | default: null | (tranform the item in a link)
  • external: true, false | default: false
  • icon object:
    • name: string | default: libray--user-team
      • Add libray, social or afflelou before the icon name
    • iconClass: string | default: null
  • button_class: string | default: null
  • mobile_size: xs, sm, default , md, lg | default: null

Available blocks

  • leading_icon : Customise the leading icon
  • trailing_icon : Customise the trailing icon