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


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>

Classes List

.btnmain class name for button op-in style.<any>
.outlinefor buttons with an outline style..btn
.tinyresize the button to a tiny [30px] size..btn
.smallresize the button to a Small [36px] size..btn
.largeresize the button to a Large [52px] size..btn
.xlargeresize the button to an xLarge [62px] size..btn
.squaremaking a fixed width equal to the button height..btn
.primaryprimary colored button..btn
.secondarysecondary colored button..btn
.darkbutton with dark colors..btn
.lightbutton with white colors..btn
.successbutton with success/green colors..btn
.dangerbutton with danger/error colors..btn
.warningbutton with warning colors..btn
.infobutton with informative colors..btn
.disabledbutton with disabled/gray colors..btn
.btn-iconfor buttons with icons before their text..btn
.btn-icon-endfor buttons with icons after their text..btn
.labeledfor buttons with labeled icons.btn-icon
Note : ( —— ) refers to the same value as the column before.

Table of Content