## Buttons

### Sizing

Example Markup
Button small Button default Button large
Small expanded button
Default expanded button
Large expanded button

                        Button small
                        Button default
                        Button large
                        Small expanded button
                        Default expanded button
                        Large expanded button

### Coloring

Example Markup
Default Primary Success Warning Alert Highlight Sd-green

                        Default
                        Primary
                        Success
                        Warning
                        Alert
                        Highlight
                        Sd-green

### Hollow style

Example Markup
Default Primary Success Warning Alert Highlight Sd-green

                        Default
                        Primary
                        Success
                        Warning
                        Alert
                        Highlight
                        Sd-green

### Text only (without background)

Example Markup
Default Primary Success Warning Alert Highlight Sd-green

                        Default
                        Primary
                        Success
                        Warning
                        Alert
                        Highlight
                        Sd-green

### Disabled

Example Markup
Default Primary Success Warning Alert Highlight Sd-green Default Primary Success Warning Alert Highlight Sd-green Default Primary Success Warning Alert Highlight Sd-green

                        Default
                        Primary
                        Success
                        Warning
                        Alert
                        Highlight
                        Default
                        Primary
                        Success
                        Warning
                        Alert
                        Highlight

### Buttons with icon font and text

Buttons can be combined with the the icon font. No extra modifiers are needed, just adding any of the available classes from the Icon font to an `<i>` tag placed before the button text.

Example Markup

// Default size

Default Primary Success Alert Default Primary Success Warning Default Primary

// Large size

Default Primary Success Default Primary

// Small size

Default Primary

                        Default
                        Primary
                        Success
                        Alert
                        Default
                        Primary
                        Success
                        Warning
                        Default
                        Primary

                        Default
                        Primary
                        Success
                        Default
                        Primary

### Buttons with icon font only

For buttons without any text, only an icon, the modifier `btn--icon-only` is needed to ajust the padding and width of the button.

Example Markup

// Default

// Large

// Small

// Circle default

// Circle large

// Circle small

                        ...

                        ...

                        ...

                        ...

                        ...

                        ...

### SD create button

Example Markup

### Dark UI

To have appropriate button colors on dark background, just add class `btn--ui-dark` to regular markup.

Example Markup

// Default style

Default Primary Success Warning Alert Highlight Sd-green

// Hollow style

Default Primary Success Warning Alert Highlight Sd-green

// Text only style

Default Primary Success Warning Alert Highlight Sd-green

// Disabled

Default Primary Success Warning Alert Highlight Sd-green Default Primary Success Warning Alert Highlight Sd-green Default Primary Success Warning Alert Highlight Sd-green

                        Default
                        Primary
                        Success
                        ...

                        Default
                        Primary
                        Success
                        ...

                        Default
                        Primary
                        Success
                        ...

                        Default
                        Primary
                        Success
                        ...

                        Default
                        Primary
                        Success
                        ...

                        Default
                        Primary
                        Success
                        ...

### Plain icon button

Plain icon buttons don't use the base `.btn` class like other buttons, instead a separate class ( `.icn-btn` ) is used to simpify the implementation and make it more flexible. It is intended mostly for actions on list items, toolbars etc. The font color is set to inherit so it will take it from the nearest parent where the color is defined. Tooltips are also suppored (see the Tooltip section for implementation details).

Example Markup

// Dark UI

## Button groups

The dashed border and padding around the button groups are only added for presentational purposes and is not part of the component.

### Horizontal

Example Markup

// Left

one two

// Right

Cancel Save

// Center

one two

// Left + Right

one two
Cancel Save

// Left + Center + Right

one two
three four
Cancel Save

### Vertical

Example Markup
one two