About
Themes
Button
Use buttons to signal actions.

Use .pow-big-button-primary class on the button

<button type="button" class="pow-big-button-primary">Big button primary</button>

<button type="button" class="pow-big-button-primary" disabled="disabled">Big button primary disabled</button>

Use .pow-medium-button-primary class on the button

<button type="button" class="pow-medium-button-primary">Medium button primary</button>

<button type="button" class="pow-medium-button-primary" disabled="disabled">Medium button primary disabled</button>

Use .pow-big-button-ghost class on the button

<button type="button" class="pow-big-button-ghost">Big button ghost</button>

<button type="button" class="pow-big-button-ghost" disabled="disabled">Big button ghost disabled</button>

Use .pow-medium-button-ghost class on the button

<button type="button" class="pow-medium-button-ghost">Medium button ghost</button>

<button type="button" class="pow-medium-button-ghost" disabled="disabled">Medium button ghost disabled</button>

Add an icon class like .icon-Add on the button if you want to change the default icon. It works also for big-button

<button type="button" class="pow-medium-button-primary icon-Add">Medium button primary with icon</button>

<button type="button" class="pow-medium-button-ghost icon-eye">Medium button ghost with icon</button>

Add .no-icon class on the button if you want to remove the default icon

<button type="button" class="pow-medium-button-primary no-icon">Medium button without icon</button>

Use .pow-button class on the button

<button type="button" class="pow-button">Button</button>

<button type="button" class="pow-button" disabled="disabled">Button disabled</button>

Use .pow-button-inverse class on the button when you want a button with color white

<button type="button" class="pow-button-inverse">Button inverse</button>

Add an icon class like .icon-powell-star on your button with .pow-button if you want to set an icon

<button type="button" class="pow-button icon-powell-star">Button with icon</button>

Use .full-width class on your button with .pow-button if you want to have a full-width button

<button type="button" class="pow-button full-width">Button full width</button>

Use .no-padding class on your button with .pow-button if you want to remove all paddings

<button type="button" class="pow-button no-padding">Button with no padding</button>

Use .pow-tag-button class on the button

<button type="button" class="pow-tag-button pow-font-regular pow-background-black700 pow-color-white pow-text-align-center selected pow-margin-bottom-sm"><span>Tag 1</span></button>

Buttons

A button can contain text. Although any tag can be used for a button, it will only be keyboard focusable if you use a button tag or you add the property tabindex="0".