1. Components
  2. utilities
  3. button

Preset Ui - Customization

Explore the customizable variants for colors and sizes available in Preset UI's Button component utilities.

Introduction

The Button component in Preset UI offers a variety of customizable variants for colors and sizes, providing flexibility to match your design requirements.

Base

Button comes with a base classes that set shared rules for all buttons.
Just add btn utility class. 
<button class="btn">
    Click Me
</button>

Variants

Apply a solid, soft, ghost or Outline style to a button
ClassNameDescriptionExample
btn-variantNameBase class for all buttons with variantName stylebtn-solid
btn-variantName-colorNameset colors for the buttonbtn-solid-primary

Size

Set size for a button
ClassNameDescriptionExample
btn-sizeVariantxs, sm ,md, lg,xlbtn-md
btn-icon-sizeVariantxs, sm ,md, lg,xlbtn-icon-lg

Example 

<button class="btn btn-md btn-soft btn-soft-warning">
    Click Me
</button>

Customization

All button variants and sizes are customizable via CSS variables.

Solid Variantes

Define a solid style like this 
<button class="btn btn-md btn-solid btn-solid-primary">
    Click Me
</button>
  • The btn-solid class is defined by the preset
  • But for full customization you need to use the presetUIHelper or define btn-solid-primary class like this : 
.btn-solid-primary{
    --btn-solid-top-shadow: hsl(var(--c-primary-500));
    --btn-solid-bottom-shadow: hsl(var(--c-primary-700));
    --btn-solid-top-shadow-hover: hsl(var(--c-primary-600));
    --btn-solid-bottom-shadow-hover: hsl(var(--c-primary-800));
    --btn-solid-color: hsl(var(--c-primary-600));
    --btn-solid-color-hover: hsl(var(--c-primary-700));
    --btn-solid-color-press: hsl(var(--c-primary-800));
}

/* if needed  */
.dark .btn-solid-primary{
    /* style here  */
}

Outline 

<button class="btn btn-md btn-outline btn-outline-primary">
    Click Me
</button>
.btn-outline-primary{
    --btn-outline-bg: hsl(var(--c-primary-50) / 1);
    --btn-outline-color: hsl(var(--c-primary-200) / 1);
    --btn-outline-text-color: hsl(var(--c-primary-800));
    --outline-radial-opacity: 0.6;
    --inner-border-color: 1;
}

.dark .btn-outline-primary {
    background-image: none;
    --inner-border-color: 0;
    --outline-radial-opacity: 0.2;
    --btn-outline-color: hsl(var(--c-primary-500) / 0.3);
    --btn-outline-text-color: hsl(var(--c-primary-300));
    --btn-outline-bg: hsl(var(--c-primary-500) / 0.05);
    --btn-outline-bg-hover: hsl(var(--c-primary-500) / 0.1);
}

Soft 

<button class="btn btn-md btn-soft btn-soft-primary">
    Click Me
</button>
.btn-soft-primary{
    --btn-soft-bg-color: hsl(var(--c-primary-50) / 1);
    --btn-soft-bg-color-hover: hsl(var(--c-primary-400) / 0.6);
    --btn-soft-bg-color-press: hsl(var(--c-primary-400) / 0.4);
    --btn-soft-text-color: hsl(var(--c-primary-600));
    --btn-soft-text-color-hover: hsl(var(--c-primary-700));
    --btn-focus-outline-color: var(--btn-soft-text-color);
}

Ghost 

<button class="btn btn-md btn-ghost btn-ghost-primary">
    Click Me
</button>
.btn-ghost-primary{
    --btn-ghost-bg-color-hover: hsl(var(--c-primary-100) / 0.5);
    --btn-ghost-bg-color-press: hsl(var(--c-primary-100) / 0.7);
    --btn-ghost-text-color: hsl(var(--c-primary-600));
    --btn-ghost-text-color-hover: hsl(var(--c-primary-700));
    --btn-focus-outline-color: var(--btn-ghost-text-color);
}

Demo

You can directly see real examples here :
Prev
Form Input

Form input components with customizable styles

Next
On this page