0.0.3

Button

A pure CSS component

Anatomy

There are 4 different button anatomies, each requiring specific classes and accessibility attributes.

<button class="button">Text</button>
                  <button class="button">Text and SVG
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">B</button>

Text

Text button do not require additonal attibutes

Text and SVG

svg tag requires aria-hidden="true" to hide it from screen readers as the the text already include the necessary information

svg tag requires class="button__icon"

SVG

a tag requires aria-label="Login to your account" to indicate indicate the action to the user

svg tag requires aria-hidden="true" to hide it from screen readers as the the text already include the necessary information

svg tag requires class="button__icon"

One caracter

a tag requires aria-label="Login to your account" to indicate indicate the action to the user

Modifier

Each button can be styled with modifiers.

You can mix as many modifiers on the same button, however you can choose only one choice per modifer

For convenience the default variant name is omited, meaning there is no need to add the default name class

You may have noticed the double dash before the modifier name — this follows the BEM (Block Element Modifier) Opens in a new window naming convention
Modifier Option Description
Variant neutral (default), accent Used for different types of actions
Color base (default), brand, alert Use any semantic colors
Font Color base (default), brand, alert Use any semantic colors.
Size md (default), sm, lg, xl Modify the size of the button.
Shape rectangular (default), square, circle Modify the shape of the button.

Variant

Set the variant of each button

Options: neutral(default), accent

<div>
                  <button class="button">Text</button>
                  <button class="button">Text and SVG
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">B</button>
                  </div>
                  <div>
                  <button class="button button--accent">Text</button>
                  <button class="button button--accent">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--square" aria-label="Button text">B</button>
                  </div>

Color

Set the color of each button

Options: base(default), brand, alert

<div>
                  <button class="button button--brand">Text</button>
                  <button class="button button--brand">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand button--square" aria-label="Button text">B</button>
                  </div>
                  <div>
                  <button class="button button--alert">Text</button>
                  <button class="button button--alert">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--alert button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--alert button--square" aria-label="Button text">B</button>
                  </div>
                  <div>
                  <button class="button button--accent button--brand">Text</button>
                  <button class="button button--accent button--brand">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand button--square" aria-label="Button text">B</button>
                  </div>
                  <div>
                  <button class="button button--accent button--alert">Text</button>
                  <button class="button button--accent button--alert">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert button--square" aria-label="Button text">B</button>
                  </div>

Font Color

Set the font color of each button

Options: base(default), brand, alert

<div>
                  <div class="avatar avatar-js  avatar--font-brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js  avatar--font-alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--font-brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--font-alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Size

Set the size of each button

Options: md(default), sm, lg, xl

<div>
                  <button class="button button--sm">Button SM</button>
                  <button class="button button--accent button--sm">Button SM<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--sm button--square" aria-label="Button SM">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--sm button--square" aria-label="Button SM">B</button>
                  </div>
                  <div>
                  <button class="button">Button MD</button>
                  <button class="button button--accent">Button MD<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--square" aria-label="Button MD">B</button>
                  </div>
                  <div>
                  <button class="button button--lg">Button LG</button>
                  <button class="button button--accent button--lg">Button LG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--lg button--square" aria-label="Button LG">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--lg button--square" aria-label="Button LG">B</button>
                  </div>
                  <div>
                  <button class="button button--xl">Button XL</button>
                  <button class="button button--accent button--xl">Button XL<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square button--xl" aria-label="Button XL">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--xl button--square" aria-label="Button XL">B</button>
                  </div>

Shape

Set the shape of each button

Options: rectangular(default), square, circle

<div>
                  <button class="button button--square" aria-label="button button--square">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="button button--square">B</button>
                  <button class="button button--circle" aria-label="Button circle">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--circle" aria-label="Button circle">B</button>
                  </div>
                  <div>
                  <button class="button button--square button--accent" aria-label="button button--square">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square button--accent" aria-label="button button--square">B</button>
                  <button class="button button--circle button--accent" aria-label="Button circle">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--circle button--accent" aria-label="Button circle">B</button>
                  </div>
                  <div>
                  <button class="button button--square button--brand" aria-label="button button--square">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--circle button--brand" aria-label="Button circle">B</button>
                  <button class="button button--square button--accent button--brand" aria-label="button button--square">B</button>
                  <button class="button button--circle button--accent button--brand" aria-label="Button circle">B</button>
                  </div>

Disabled

Disable State for each button

<button class="button" disabled="true">Text</button>
                  <button class="button" disabled="true">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" disabled="true" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" disabled="true" aria-label="Button text">B</button>
                  <button class="button button--brand" disabled="true">Text</button>
                  <button class="button button--brand" disabled="true">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand square" disabled="true" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand button--square" disabled="true" aria-label="Button text">B</button>
                  <button class="button button--alert" disabled="true">Text</button>
                  <button class="button button--alert" disabled="true">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--alert button--square" disabled="true" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--alert button--square" disabled="true" aria-label="Button text">B</button>
                  <button class="button button--accent button--brand" disabled="true">Text</button>
                  <button class="button button--accent button--brand" disabled="true">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand button--square" disabled="true" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand button--square" disabled="true" aria-label="Button text">B</button>
                  <button class="button button--accent button--alert" disabled="true">Text</button>
                  <button class="button button--accent button--alert" disabled="true">Text and SVG<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert button--square" disabled="true" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert button--square" disabled="true" aria-label="Button text">B</button>

RTL

RTL support for button with icon

<div dir="rtl">
                  <button class="button">النص والرمز
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand">النص والرمز<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--brand square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--alert">النص والرمز<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  </div>
                  <div dir="rtl">
                  <button class="button button--alert button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand">النص والرمز<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--brand button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert">النص والرمز<svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--alert button--square" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  </div>

Mix

Mix as many modifiers for each button

<button class="button">Base Font-Base</button>
                  <button class="button button--font-brand">Base Font-Brand</button>
                  <button class="button button--font-alert">Base Font-Alert</button>
                  <button class="button button--brand">Brand Font-Base</button>
                  <button class="button button--brand button--font-brand">Brand Font-Brand</button>
                  <button class="button button--brand button--font-alert">Brand Font-Alert</button>
                  <button class="button button--alert">Alert Font-Base</button>
                  <button class="button button--alert button--font-brand">Alert Font-Brand</button>
                  <button class="button button--alert button--font-alert">Alert Font-Alert</button>
                  <button class="button button--accent">Accent Base Font-Base</button>
                  <button class="button button--accent button--font-brand">Accent Base Font-Brand</button>
                  <button class="button button--accent button--font-alert">Accent Base Font-Alert</button>
                  <button class="button button--accent button--brand">Accent Brand Font-Base</button>
                  <button class="button button--accent button--brand button--font-brand">Accent Brand Font-Brand</button>
                  <button class="button button--accent button--brand button--font-alert">Accent Brand Font-Alert</button>
                  <button class="button button--accent button--alert">Accent Alert Font-Base</button>
                  <button class="button button--accent button--alert button--font-brand">Accent Alert Font-Brand</button>
                  <button class="button button--accent button--alert button--font-alert">Accent Alert Font-Alert</button>

Custom (Tailwind)

If you are using Tailwind styling, you can customize each button with Tailwind utilities

<button class="button text-blue-600 border-yellow-700 [&amp;_svg]:text-purple-700">
                  Text and SVG
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square hover:bg-slate-100 ring-2 ring-slate-300 transition" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--square bg-gray-100 text-gray-800 shadow-sm hover:shadow-md transition" aria-label="Button text">
                  B
                  </button>
                  <button class="button button--accent animate-pulse hover:animate-none [&amp;_svg]:text-amber-600">
                  Text and SVG
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--square ring-2 ring-rose-400 hover:scale-105 transition-transform" aria-label="Button text">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>
                  <button class="button button--accent button--square font-bold border-2 border-accent hover:bg-accent/20 transition" aria-label="Button text">
                  B
                  </button>
                  <button class="button button--alert rounded-full  mx-6 text-base-1 bg-green-700 hover:bg-green-800 active:bg-green-900 justify-between">
                  Text and SVG
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </button>

Templates

Button components is available in the followng templates

Badge Checkbox