Buttons

Documentation and examples for styles of button components of Phenix Design System.

Overview

PDS buttons are preset style, Add the base class .btn to any <element>, then extend with our optional modifier classes or custom styles or via CSS variables that come with it,

Standard Buttons

in the example below you can find the normal size button with multiple colors and the CSS variables to customize it as you desire.

<!-- Button -->
<button class="btn border-alpha-10">Button</button>

<!-- Button -->
<button class="btn primary">Primary</button>

<!-- Button -->
<button class="btn secondary">Secondary</button>

<!-- Button -->
<button class="btn info">Informative</button>

<!-- Button -->
<button class="btn success">Success</button>

<!-- Button -->
<button class="btn dark">Dark</button>

<!-- Button -->
<button class="btn danger">Danger</button>

<!-- Button -->
<button class="btn warning">Warning</button>

<!-- Button -->
<button class="btn light">Light</button>

<!-- Button -->
<button class="btn disabled">Light</button>

/*==== CSS Options ====*/
.btn {
    /*==== Options ====*/
    --padding : 20px;
    --text-weight : var(--medium-weight);
    /*==== Size Options ====*/
    --height : 42px;
    --text-size : 15px;
    --border-size : 0;
    /*==== Colors Options ====*/
    --color : var(--dark-color);
    --background : var(--primary-offwhite);
    --border-color : transparent;
}

Buttons Sizes

in the example below you can find and see 5 different sizes of the buttons sizing classes .tiny, .small, .large, .xlarge.

<!-- Tiny-->
<button class="btn primary tiny">tiny</button>

<!-- Small -->
<button class="btn primary small">small</button>

<!-- Normal -->
<button class="btn primary">Normal</button>

<!-- Large -->
<button class="btn primary large">Large Button</button>

<!-- xLarge -->
<button class="btn primary xlarge">xLarge Button</button>

Buttons Outline

in the example below you can find and see the buttons with the .outline style class.

<!-- Button -->
<button class="btn outline">Button</button>

<!-- Button -->
<button class="btn outline primary">Primary</button>

<!-- Button -->
<button class="btn outline secondary">Secondary</button>

<!-- Button -->
<button class="btn outline info">Informative</button>

Buttons with icons

in the example below you can find and see the buttons with icons style classes .btn-icon and .btn-icon-end for reversing the icon position to the other side.

<!-- Button -->
<button class="btn light btn-icon far fa-star">Button</button>

<!-- Button -->
<button class="btn primary btn-icon-end far fa-user">Primary</button>

<!-- Button -->
<button class="btn secondary outline btn-icon fas fa-cog">Button</button>

<!-- Button -->
<button class="btn outline primary btn-icon-end fas fa-star">Primary</button>

Labeled icons

in this example you can use .labeled to make the icon of any button inside the labeled box before or after the text of the button.

<!-- Button -->
<button class="btn primary btn-icon labeled far fa-user">Primary</button>

<!-- Button -->
<button class="btn primary btn-icon-end far fa-user labeled">Primary</button>