Etat Pur Design System

Buttons: Solids 

<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-black before:-top-5 before:-bottom-5 before:-left-5 before:-right-5 before:-z-10">
    <!-- light / Medium -->
    <button type="button" class=" btn  btn-light  btn-solid  btn-size-md">
        BTN

    </button>
    <button type="button" class=" btn  btn-light  btn-solid  btn-size-md btn-icons">
        BTN

        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>
    </button>
    <button type="button" class=" btn  btn-light  btn-solid  btn-size-md btn-icons">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> BTN

    </button>
    <button type="button" class=" btn  btn-light  btn-solid  btn-size-md btn-icons">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> BTN

        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>
    </button>
    <button type="button" aria-label="BTN" class=" btn  btn-light  btn-solid  btn-size-md btn-only-icon">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>

    </button>
</div>
<!-- Do not copy  the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
    <!-- dark / Medium -->
    <button type="button" class=" btn  btn-dark  btn-solid  btn-size-md">
        BTN

    </button>
    <button type="button" class=" btn  btn-dark  btn-solid  btn-size-md btn-icons">
        BTN

        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>
    </button>
    <button type="button" class=" btn  btn-dark  btn-solid  btn-size-md btn-icons">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> BTN

    </button>
    <button type="button" class=" btn  btn-dark  btn-solid  btn-size-md btn-icons">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> BTN

        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>
    </button>
    <button type="button" aria-label="BTN" class=" btn  btn-dark  btn-solid  btn-size-md btn-only-icon">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>

    </button>
</div>
 
{% if type in ['solid', 'outline'] %}

    {% for color in simpleColors %}
        <!-- 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-black before:-top-5 before:-bottom-5 before:-left-5 before:-right-5 before:-z-10' }}">
            {% for size in simpleSizes %}
                <!-- {{ color.name }} / {{ size.name }} -->
                {% for icon_type in icon_types %}
                    {% include "@template-button" with {
                        size: size.size,
                        color: color.color,
                        type: type,
                        icon_type: icon_type,
                        disabled: color.disabled,
                        label: label,
                        border: color.border
                    } %}
                {% endfor %}
            {% endfor %}
        </div>
    {% endfor %}

{% else %}

    {% for color in colors %}
        <!-- Do not copy  the div tag below -->
        <div class="inline-flex items-start flex-col gap-8 {{ 'light' in color.color ? 'relative before:absolute before:bg-black before:-top-5 before:-bottom-5 before:-left-5 before:-right-5 before:-z-10' }}">
            {% for size in sizes %}
                <div class="inline-flex items-start flex-col gap-2">
                    <!-- {{ color.name }} / {{ size.name }} -->
                    {% for icon_type in icon_types %}
                        {% include "@template-button" with {
                            size: size.size,
                            color: color.color,
                            type: type,
                            icon_type: icon_type,
                            disabled: color.disabled,
                            label: label,
                            border: color.border
                        } %}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}

{% endif %}
 
{
  "label": "BTN",
  "colors": [
    {
      "name": "uno",
      "color": "uno"
    },
    {
      "name": "uno-border",
      "color": "uno",
      "border": true
    },
    {
      "name": "light",
      "color": "light"
    },
    {
      "name": "light-border",
      "color": "light",
      "border": true
    },
    {
      "name": "dark",
      "color": "dark"
    },
    {
      "name": "dark-border",
      "color": "dark",
      "border": true
    },
    {
      "name": "danger",
      "color": "danger"
    },
    {
      "name": "danger-border",
      "color": "danger",
      "border": true
    },
    {
      "name": "success",
      "color": "success"
    },
    {
      "name": "success-border",
      "color": "success",
      "border": true
    },
    {
      "name": "warning",
      "color": "warning"
    },
    {
      "name": "warning-border",
      "color": "warning",
      "border": true
    }
  ],
  "simpleColors": [
    {
      "name": "light",
      "color": "light"
    },
    {
      "name": "dark",
      "color": "dark"
    }
  ],
  "sizes": [
    {
      "name": "Xsmall",
      "size": "xs"
    },
    {
      "name": "Small",
      "size": "sm"
    },
    {
      "name": "Medium",
      "size": "md"
    },
    {
      "name": "Large",
      "size": "lg"
    }
  ],
  "simpleSizes": [
    {
      "name": "Medium",
      "size": "md"
    }
  ],
  "type": "solid",
  "icon_types": [
    "classic",
    "trailing-icon",
    "leading-icon",
    "all-icons",
    "only-icon"
  ]
}

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 transparent is only available for primary background

  • size: sm, default | default: default

  • color: light, dark , uno, warning, error, success | default: light

    • 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: classic, outline, solid, subtle | default: solid

  • icon_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: heroicons--user-outline
    • iconClass: string | default: null

  • button_class: string | default: null

  • Available blocks

  • leading_icon : Customise the leading icon

  • trailing_icon : Customise the trailing icon