Not another button component

Usage

Base

Default Button Primary Button Secondary Button Outline Button Success Button Warning Button Error Button

<a href="#" class="btn" role="button">Default Button</a>
<a href="#" class="btn btn-primary" role="button">Primary Button</a>
<a href="#" class="btn btn-secondary" role="button">Secondary Button</a>
<a href="#" class="btn btn-outline" role="button">Outline Button</a>
<a href="#" class="btn btn-success" role="button">Success Button</a>
<a href="#" class="btn btn-warning" role="button">Warning Button</a>
<a href="#" class="btn btn-error" role="button">Error Button</a>

Size

Small Button Medium Button Large Button

<a href="#" class="btn btn-primary small" role="button">Small Button</a>
<a href="#" class="btn btn-primary" role="button">Medium Button</a>
<a href="#" class="btn btn-primary large" role="button">Large Button</a>

Disable

Default Primary Secondary Outline Success Warning Error

<a href="#" class="btn disabled" role="button" disabled>Default</a>

Loading

Loading Loading Loading Loading Loading Loading Loading

<a href="#" class="btn loading" role="button">Default Button</a>
<a href="#" class="btn btn-primary loading" role="button">Primary Button</a>
<a href="#" class="btn btn-secondary loading" role="button">Secondary Button</a>
<a href="#" class="btn btn-outline loading" role="button">Outline Button</a>
<a href="#" class="btn btn-success loading" role="button">Success Button</a>
<a href="#" class="btn btn-warning loading" role="button">Warning Button</a>
<a href="#" class="btn btn-error loading" role="button">Error Button</a>

Buttons with text and icon

Search Inbox Language Download Help

<a href="#" class="btn" role="button">><i class="fas fa-search"></i> Search</a>
<a href="#" class="btn" role="button"><i class="fas fa-inbox"></i> Inbox</a>
<a href="#" class="btn" role="button"><i class="fas fa-globe"></i> Language</a>
<a href="#" class="btn" role="button"><i class="fas fa-download"></i> Download</a>
<a href="#" class="btn" role="button"><i class="fas fa-question-circle"></i> Help</a>

Buttons icon only

<a href="#" class="btn" role="button"><i class="fas fa-search"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-inbox"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-globe"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-download"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-question-circle"></i></a>

Border Radius

No Radius Small Radius Medium Radius Large Radius

<a href="#" class="btn btn-primary radius-none" role="button">No Radius</a>
<a href="#" class="btn btn-primary radius-small" role="button">Small Radius</a>
<a href="#" class="btn btn-primary" role="button">Medium Radius</a>
<a href="#" class="btn btn-primary radius-large" role="button">Large Button</a>
<a href="#" class="btn btn-primary radius-circle" role="button">Circle Button</a>

Horizontal button group

Cut Copy Paste Delete

<div class="btn-group btn-group-horizontal">
    <a href="#" class="btn" role="button">Cut</a>
    <a href="#" class="btn btn-outline" role="button">Copy</a>
    <a href="#" class="btn btn-outline" role="button">Paste</a>
    <a href="#" class="btn btn-outline" role="button">Delete</a>
</div>

Horizontal button group icons only

<div class="btn-group btn-group-horizontal">
    <a href="#" class="btn" role="button"><i class="fas fa-cut"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-copy"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-paste"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-trash-alt"></i></a>
</div>

Vertical button group

Pounds Euro Dollars

<div class="btn-group btn-group-vertical">
    <a href="#" class="btn" role="button">Pounds</a>
    <a href="#" class="btn btn-outline" role="button">Euro</a>
    <a href="#" class="btn btn-outline" role="button">Dollars</a>
</div>

Vertical button group icons only

<div class="btn-group btn-group-vertical">
    <a href="#" class="btn" role="button"><i class="fas fa-pound-sign"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-euro-sign"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-dollar-sign"></i></a>
</div>

Not Another Button Component.