Solid

A solid button has a filled background and a matching border. Its text color uses the corresponding on-color.

<button class="btn btn-solid btn-primary">primary</button>
<button class="btn btn-solid btn-secondary">secondary</button>
<button class="btn btn-solid btn-success">success</button>
<button class="btn btn-solid btn-warning">warning</button>
<button class="btn btn-solid btn-error">error</button>
<button class="btn btn-solid btn-white">white</button>
<button class="btn btn-solid btn-black">black</button>

Outline

An outline button has a transparent background-color. Its border and text-color is the corresponding color.

<button class="btn btn-outline btn-primary">primary outline</button>
<button class="btn btn-outline btn-secondary">secondary outline</button>
<button class="btn btn-outline btn-success">success outline</button>
<button class="btn btn-outline btn-warning">warning outline</button>
<button class="btn btn-outline btn-error">error outline</button>
<button class="btn btn-outline btn-white">white outline</button>
<button class="btn btn-outline btn-black">black outline</button>

Text

A text button has a transparent background-color and transparent border-color. It´s text-color is the corresponding color.
Hovering a text button will show the highlight background-color.

<button class="btn btn-text btn-primary">primary text</button>
<button class="btn btn-text btn-secondary">secondary text</button>
<button class="btn btn-text btn-success">success text</button>
<button class="btn btn-text btn-warning">warning text</button>
<button class="btn btn-text btn-error">error text</button>
<button class="btn btn-text btn-white">white text</button>
<button class="btn btn-text btn-black">black text</button>

Start Icon

Placing an icon inside a button is easy as the button is a flex container.

Button with Icon

Sizes

There are 3 sizes for buttons. XS, SM and default.

<button class="btn btn-solid btn-primary btn-xs">Button xs</button>
<button class="btn btn-solid btn-primary btn-sm">Button sm</button>
<button class="btn btn-solid btn-primary">Button default</button>

Active

By adding the class active, a button will be displayed with its hover and on-colors.

<button class="btn btn-solid btn-primary active">
	<span>solid active</span>
</button>
<button class="btn btn-outline btn-primary active">
	<span>outline active</span>
</button>
<button class="btn btn-text btn-primary active">
	<span>text active</span>
</button>

Disabled

By adding the attribute disabled each button will be displayed with a gray background-color and text-color.

<button class="btn btn-solid btn-primary" disabled="disabled">disabled</button>

CSS Variables

Button CSS Variables allow to customize buttons very easy. Each Variable uses the corresponding global default Variable by default.

--button-border-width: var(--border-width);
--button-border-radius: var(--border-radius);

--button-focus-outline-width: var(--focus-outline-width);
--button-focus-outline-style: var(--focus-outline-style);
--button-focus-outline-color: var(--focus-outline-color);

--button-font-size: var(--font-size);
--button-padding-y: 0.25rem;
--button-padding-x: 0.9rem;

--button-disabled-font-color: var(--disabled-font-color);
--button-disabled-bg-color: var(--disabled-bg-color);
--button-disabled-border-color: var(--disabled-border-color);

--button-transition-duration: var(--transition-duration, 0.2s);

Customizing a Button with CSS Variable

By applying custom values for —button-on-color, —button-color and —button-color-hover - i.e.: white, red and crimson.

<button class="btn btn-solid" style="--button-on-color: white; --button-color: red; --button-color-hover: crimson;">
	<span>primary</span>
</button>