Buttons

Use Sedna CSS custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Default

Primary

Success

Warning

Danger

White

Basic

There are default button, primary button, success button, warning button, danger button and white button in sedna

<div class="SnBtn">Default</div> 
<div class="SnBtn primary">Primary</div> 
<div class="SnBtn success">Success</div> 
<div class="SnBtn warning">Warning</div> 
<div class="SnBtn danger">Danger</div> 
<div class="SnBtn white">White</div>

Small

Default

Large

Size

Sedna supports a default button size as well as a large and small size.

<div class="SnBtn sm">Small</div> 
<div class="SnBtn">Default</div> 
<div class="SnBtn lg">Large</div>

block

Block

block class will make the button fit to its parent width.

<div class="SnBtn block">Default</div> 
<div class="SnBtn primary block">Primary</div> 
<div class="SnBtn success block">Success</div>

Default

Primary

Success

Warning

Danger

White

A loading indicator can be added to a button by setting the loading class on the Button.

<div class="SnBtn loading">Default</div> 
<div class="SnBtn primary loading">Primary</div> 
<div class="SnBtn success loading">Success</div> 
<div class="SnBtn warning loading">Warning</div> 
<div class="SnBtn danger loading">Danger</div> 
<div class="SnBtn white loading">White</div>

Default

Primary

Success

Warning

Danger

White

Disabled

To mark a button as disabled, add the disabled class to the Button.

<div class="SnBtn loading" disabled>Default</div> 
<div class="SnBtn primary loading" disabled>Primary</div> 
<div class="SnBtn success loading" disabled>Success</div> 
<div class="SnBtn warning loading" disabled>Warning</div> 
<div class="SnBtn danger loading" disabled>Danger</div> 
<div class="SnBtn white loading" disabled>White</div>

Default

Primary

Group

Buttons can be grouped by placing multiple Buttons.

<div class="SnBtn-group">
    <div class="SnBtn loading">Default</div>
    <div class="SnBtn primary loading">Primary</div>
</div>

Icon

Buttons only with icons.

<div class="SnBtn-group">
    <div class="SnBtn icon"><i class="icon-clipboard"></i></div>
    <div class="SnBtn icon"><i class="icon-facebook"></i></div>
    <div class="SnBtn icon"><i class="icon-twitter"></i></div>
    <div class="SnBtn primary icon"><i class="icon-code"></i></div>
</div>

twitter

Radio

Buttons radio only with icons.

<div class="SnBtn-group">
    <div class="SnBtn icon"><i class="icon-clipboard"></i></div>
    <div class="SnBtn icon"><i class="icon-facebook"></i></div>
    <div class="SnBtn icon"><i class="icon-twitter"></i></div>
    <div class="SnBtn primary icon"><i class="icon-code"></i></div>
</div>

API

Property	Class
Button	`.SnBtn`
Color	`.primary` `.success.warning` `.danger` `.white`
Size	`.sm` `.lg`
Loading	`.loading`
Disabled	`.disabled`
Block	`.block`
Group	`.SnBtn-group`
Icon	`.icon`