Skip to content

Soracom

Design System
Home Design System Elements Buttons

Buttons

Options 

Basic usage 

There are 3x basic button styles, ds-button, ds-button --primary and ds-button --plain, which can be applied to either <button> or <a> elements.

The primary button should be used once per component to indicate the most important or primary action. For example in a dialog that has two actions ‘Update’ and ‘Cancel’, it’s likely that ‘Update’ is the primary action and therefore should use the primary button style.

<button class="ds-button">
  <span>Button label</span>
</button>
<button class="ds-button --primary">
  <span>Button label</span>
</button>
<button class="ds-button --plain">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button">
  <span>Button label</span>
</button>
<button class="ds-button --primary">
  <span>Button label</span>
</button>
<button class="ds-button --plain">
  <span>Button label</span>
</button>

Using <a> elements 

In addition to standard html buttons, a elements can be presented visually as buttons with the same options. See When to use a button vs a text link

<a class="ds-button" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin --hide-label" href="#">
  <span>Button label</span>
</a>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<a class="ds-button" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin --hide-label" href="#">
  <span>Button label</span>
</a>

When applying button styles to anchor links <a>, the disabled state is displayed when there is no href attribute, or by adding the class --disabled.

<a class="ds-button">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin --disabled" href="#">
  <span>Button label</span>
</a>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<a class="ds-button">
  <span>Button label</span>
</a>
<a class="ds-button --icon-signin --disabled" href="#">
  <span>Button label</span>
</a>

Visual states 

All 3x buttons styles (default, primary and plain) adhere to 4x preset visual states - alert, warning, success and info.

Example using default style
<button class="ds-button --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --info">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --icon-warning --info">
  <span>Button label</span>
</button>
Example using primary style
<button class="ds-button --primary --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --info">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --primary --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-warning --info">
  <span>Button label</span>
</button>
Example using plain style
<button class="ds-button --plain --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --info">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --plain --icon-warning --alert">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --warning">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --success">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-warning --info">
  <span>Button label</span>
</button>

Component colors 

<button class="ds-button --color-magenta">
  <span>Button label</span>
</button>
<button class="ds-button --primary --color-magenta-shade">
  <span>Button label</span>
</button>
<button class="ds-button --plain --color-red-shade">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --color-magenta">
  <span>Button label</span>
</button>
<button class="ds-button --primary --color-magenta-shade">
  <span>Button label</span>
</button>
<button class="ds-button --plain --color-red-shade">
  <span>Button label</span>
</button>

Icons 

Add an additional class such as --icon-online from the available icon modifier list. Alternatively you can use an inline icon.

<button class="ds-button --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-online">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-online">
  <span>Button label</span>
</button>

Icon position 

Adding the class --right-icon will show the button on the right of the button.

Example showing right aligned icons
<button class="ds-button --right-icon --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --primary --right-icon --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --plain --right-icon --icon-online">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --right-icon --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --primary --right-icon --icon-online">
  <span>Button label</span>
</button>
<button class="ds-button --plain --right-icon --icon-online">
  <span>Button label</span>
</button>

Inline icons 

Alternatively ds-icon can be used inside ds-button if necessary. This can be used when more than one icon is required, or if more control over the icon is required.

<button class="ds-button --icon-online">
  <span>Button label</span>
  <i class="ds-icon --icon-arrow-right"></i>
</button>
<button class="ds-button --primary --icon-online">
  <span>Button label</span>
  <i class="ds-icon --icon-arrow-right"></i>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-online">
  <span>Button label</span>
  <i class="ds-icon --icon-arrow-right"></i>
</button>
<button class="ds-button --primary --icon-online">
  <span>Button label</span>
  <i class="ds-icon --icon-arrow-right"></i>
</button>

Inline icon animation 

Using inline icons allows you to use all the icon animation options. To animate the entire button, or animate a button not using inline icons see Animation below.

<button class="ds-button">
<i class="ds-icon --icon-refresh-cw --spin --pulse"></i>
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button">
<i class="ds-icon --icon-refresh-cw --spin --pulse"></i>
  <span>Button label</span>
</button>

Inline icon colors 

Using inline icons allows applying color to just the icon.

<button class="ds-button">
<i class="ds-icon --icon-language --color-celeste"></i>
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button">
<i class="ds-icon --icon-language --color-celeste"></i>
  <span>Button label</span>
</button>

Inline icon size 

Using inline icons allows you to vary the size of the icon

<button class="ds-button">
<i class="ds-icon --icon-online --small"></i>
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button">
<i class="ds-icon --icon-online --small"></i>
  <span>Button label</span>
</button>

Size 

xxsmall, xsmall, small, default, large 

<button class="ds-button --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --small">
  <span>Small size</span>
</button>
<button class="ds-button">
  <span>Default size</span>
</button>
<button class="ds-button --large">
  <span>Large size</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --small">
  <span>Small size</span>
</button>
<button class="ds-button">
  <span>Default size</span>
</button>
<button class="ds-button --large">
  <span>Large size</span>
</button>
Buttons sizes with icons
<button class="ds-button --icon-signin --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --small">
  <span>Small size</span>
</button>
<button class="ds-button --icon-signin">
  <span>Default size</span>
</button>
<button class="ds-button --icon-signin --large">
  <span>Large size</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-signin --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --small">
  <span>Small size</span>
</button>
<button class="ds-button --icon-signin">
  <span>Default size</span>
</button>
<button class="ds-button --icon-signin --large">
  <span>Large size</span>
</button>
Buttons sizes with icons, hide label
<button class="ds-button --icon-signin --hide-label --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --small">
  <span>Small size</span>
</button>
<button class="ds-button --icon-signin --hide-label">
  <span>Default size</span>
</button>
<button class="ds-button --icon-signin --hide-label --large">
  <span>Large size</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-signin --hide-label --xxsmall">
  <span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --xsmall">
  <span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --small">
  <span>Small size</span>
</button>
<button class="ds-button --icon-signin --hide-label">
  <span>Default size</span>
</button>
<button class="ds-button --icon-signin --hide-label --large">
  <span>Large size</span>
</button>

mid, wide 

By default, ds-button will be a minimum of 40px wide. --mid has a minimum width of 80px, and --wide has a minimum width of 160px;

<button class="ds-button --mid">
  <span>Mid</span>
</button>
<button class="ds-button">
  <span>Def</span>
</button>
<button class="ds-button --wide">
  <span>Wide</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --mid">
  <span>Mid</span>
</button>
<button class="ds-button">
  <span>Def</span>
</button>
<button class="ds-button --wide">
  <span>Wide</span>
</button>

Hiding the label 

By default a button shows the label text (the contents inside the span). This can be hidden using the --hide-label option. For accessibility purposes it’s preferable to have a descriptive label hidden using this method, rather than omitting the label text.

<button class="ds-button --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-cloud-connected --hide-label">
  <span>Button label</span>
</button>

Animation 

Animation states for buttons should only be used sparingly to indicate temporary states (such as uploading/downloading a file, sending/receiving data or waiting for a server side process to complete).

--spin works with any icon on the available icon modifier list. This option will animate the icon in-place (and requires an existing --icon-* class to exist on the button).

Also see Inline icon animation for examples of other animations that can be applied to an inline icon.

--spin
<div>
  <button class="ds-button --icon-refresh-cw --spin">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --spin">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --icon-refresh-cw --spin">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --spin">
    <span>Button label</span>
  </button>
</div>
--pulse
<div>
  <button class="ds-button --icon-refresh-cw --pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --pulse">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --icon-refresh-cw --pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --pulse">
    <span>Button label</span>
  </button>
</div>
--glow
<div>
  <button class="ds-button --icon-refresh-cw --glow">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --glow">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --icon-refresh-cw --glow">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --glow">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --icon-refresh-cw --blink">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --blink">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --icon-refresh-cw --blink">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --blink">
    <span>Button label</span>
  </button>
</div>
--spin and --pulse
<div>
  <button class="ds-button --icon-refresh-cw --spin --pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --spin --pulse">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --icon-refresh-cw --spin --pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-refresh-cw --spin --pulse">
    <span>Button label</span>
  </button>
</div>

Loading state 

A button can be triggered to display a loading state - where the button contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the button. Currently there are two loading state icons available, --loading or --loading-refresh. Buttons in the loading state currently have a common look, regardless of the button style.

<button class="ds-button --loading">
  <span>Button label</span>
</button>
<button class="ds-button --primary --loading-refresh">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --loading">
  <span>Button label</span>
</button>
<button class="ds-button --primary --loading-refresh">
  <span>Button label</span>
</button>

Notification indicator 

A ds-button can be trigger to display a notification indicator (dot) by adding the class --notification. The notification indicator works with all button styles and visual states.

<a class="ds-button --notification" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification --info --hide-label" href="#">
  <span>Button label</span>
</a>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<a class="ds-button --notification" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification --info --hide-label" href="#">
  <span>Button label</span>
</a>

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

<a class="ds-button --notification-success" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification-success" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification-success --info --hide-label" href="#">
  <span>Button label</span>
</a>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<a class="ds-button --notification-success" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification-success" href="#">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification-success --info --hide-label" href="#">
  <span>Button label</span>
</a>

Additionally, if the button has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

<a class="ds-button --notification" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification --info --hide-label" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<a class="ds-button --notification" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>
<a class="ds-button --primary --notification" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>
<a class="ds-button --primary --icon-warning --notification --info --hide-label" href="#" data-notification-counter="3">
  <span>Button label</span>
</a>

Text addon inside buttons 

ds-text can be used inside ds-button. See ds-text for further examples.

ds-button can also act as an addon to a field, see below.

Buttons inside other components 

When ds-button is used inside ds-select, ds-input, or ds-range it will be displayed next to the element and will not wrap when the window is scaled.

<!-- Inside ds-input -->
<div class="ds-input">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button primary -->
<div class="ds-input">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button plain -->
<div class="ds-input">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button primary-->
<div class="ds-select">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button plain-->
<div class="ds-select">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-range -->
<div class="ds-range">
  <input type="range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button primary-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button plain-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Inside ds-input -->
<div class="ds-input">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button primary -->
<div class="ds-input">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button plain -->
<div class="ds-input">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button primary-->
<div class="ds-select">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button plain-->
<div class="ds-select">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-range -->
<div class="ds-range">
  <input type="range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button primary-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <input type="range">
</div>
<!-- Inside ds-range ds-button plain-->
<div class="ds-range">
  <input type="range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
</div>
<div class="ds-range">
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <input type="range">
</div>

Addon button 

The --addon styles slightly modify the button to ‘join’ the containing component.

Addon default style 

<!-- Inside ds-input -->
<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button primary-->
<div class="ds-input">
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button plain-->
<div class="ds-input">
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button primary -->
<div class="ds-select">
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button plain -->
<div class="ds-select">
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Inside ds-input -->
<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button primary-->
<div class="ds-input">
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-input ds-button plain-->
<div class="ds-input">
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
  <input type="text"/>
</div>
<div class="ds-input">
  <input type="text"/>
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button primary -->
<div class="ds-select">
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --primary --addon">
    <span>Button label</span>
  </button>
</div>
<!-- Inside ds-select ds-button plain -->
<div class="ds-select">
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --plain --addon">
    <span>Button label</span>
  </button>
</div>

Styles 

Custom styles exist for specific use cases. See also the basic buttons styles.

Buttons can be styled as links.

Button with label style
<button class="ds-button --link">
  <span>Button link</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --link">
  <span>Button link</span>
</button>
<button class="ds-button --link --icon-settings">
  <span>Button link</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --link --icon-settings">
  <span>Button link</span>
</button>
<button class="ds-button --link">
  <span>Button link</span>
  <i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --link">
  <span>Button link</span>
  <i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>

Label style 

Buttons can be styled as labels. A common usage would be in ds-datatable th headers for sorting columns.

Button with label style
<button class="ds-button --label">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --label">
  <span>Button label</span>
</button>
Button with label style and icon
<button class="ds-button --label --icon-settings">
  <span>Button label</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --label --icon-settings">
  <span>Button label</span>
</button>
Button with label style and tiny inline icon
<button class="ds-button --label">
  <span>Button label</span>
  <i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --label">
  <span>Button label</span>
  <i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>
Button with label style
<button class="ds-button --menu">
  <span>Menu</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --menu">
  <span>Menu</span>
</button>
Inside ds-header
<header class="ds-header --dark">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span class="ds-button --menu --hide-label">
        <span>Menu</span>
      </span>
    </summary>
    <div class="__content --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header --dark">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span class="ds-button --menu --hide-label">
        <span>Menu</span>
      </span>
    </summary>
    <div class="__content --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Feature style 

<button class="ds-button --feature --icon-order">
  <span>
    <span class="ds-text --label --small">Orders</span>
    <span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
  </span>
</button>
<button class="ds-button --primary --feature --icon-order">
  <span>
    <span class="ds-text --label --small">Orders</span>
    <span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
  </span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --feature --icon-order">
  <span>
    <span class="ds-text --label --small">Orders</span>
    <span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
  </span>
</button>
<button class="ds-button --primary --feature --icon-order">
  <span>
    <span class="ds-text --label --small">Orders</span>
    <span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
  </span>
</button>

Close style 

Button with close style
<!-- Small -->
<button class="ds-button --small __close">
  <span>Close</span>
</button>
<button class="ds-button --small --primary __close">
  <span>Close</span>
</button>
<!-- Default -->
<button class="ds-button __close">
  <span>Close</span>
</button>
<button class="ds-button --primary __close">
  <span>Close</span>
</button>
<!-- Large -->
<button class="ds-button --large __close">
  <span>Close</span>
</button>
<button class="ds-button --large --primary __close">
  <span>Close</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Small -->
<button class="ds-button --small __close">
  <span>Close</span>
</button>
<button class="ds-button --small --primary __close">
  <span>Close</span>
</button>
<!-- Default -->
<button class="ds-button __close">
  <span>Close</span>
</button>
<button class="ds-button --primary __close">
  <span>Close</span>
</button>
<!-- Large -->
<button class="ds-button --large __close">
  <span>Close</span>
</button>
<button class="ds-button --large --primary __close">
  <span>Close</span>
</button>

in-place 

--in-place is a shortcut class, often used in a datatable, when a button needs to sit adjacent to text for editing purposes. It is equivilent to ds-button.--xxsmall.--plain.--hide-label.

Button with close style
<button class="ds-button --icon-edit --in-place">
  <span>Close</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-edit --in-place">
  <span>Close</span>
</button>

Tests 

ds-tag inside ds-button 

<button class="ds-button --icon-signin">
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
</button>
<button class="ds-button --icon-signin">
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-signin">
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
</button>
<button class="ds-button --icon-signin">
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
  <span class="ds-tag">
    <span><strong>Info</strong>Tag text</span>
  </span>
</button>

<button> 

<button> with default button style
<div>
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<button> with primary button style
<div>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button --primary" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --primary --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --primary --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --primary">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button --primary" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --primary --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --primary --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --primary --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --primary --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<button> with plain button style
<div>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button --plain" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --plain --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --plain --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <button class="ds-button --plain">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label">
    <span>Button label</span>
  </button>
</div>
<p>Disabled state:</p>
<div>
  <button class="ds-button --plain" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label" disabled="disabled">
    <span>Button label</span>
  </button>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <button class="ds-button --plain --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --alert">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --warning">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --success">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --info">
    <span>Button label</span>
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button --plain --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --plain --icon-signin --alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button --plain --icon-signin --hide-label --alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>

<a> 

<a> with default button style
<div>
  <a class="ds-button" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <a class="ds-button" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>
<a> with primary button style
<div>
  <a class="ds-button --primary" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button --primary">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --primary --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <a class="ds-button --primary" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button --primary">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --primary --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --primary --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --primary --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>
<a> with plain button style
<div>
  <a class="ds-button --plain" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button --plain">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --plain --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div>
  <a class="ds-button --plain" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label" href="#">
    <span>Button label</span>
  </a>
</div>
<p>Disabled state:</p>
<div>
  <a class="ds-button --plain">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button --plain --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button --plain --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --alert">
    <span>Button label</span>
  </a>
  <a class="ds-button --plain --icon-signin --hide-label --alert">
    <span>Button label</span>
  </a>
</div>

<ui-button> 

Enabled button - simplified Angular example
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="danger"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <i class="ds-icon --icon-edit"></i>
    <span>Button label</span>
  </button>
</ui-button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="danger"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>

<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <i class="ds-icon --icon-edit"></i>
    <span>Button label</span>
  </button>
</ui-button>
Disabled button - simplified Angular example
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Create Group</span>
  </button>
</ui-button>
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-button-style="danger"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Create Group</span>
  </button>
</ui-button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Button label</span>
  </button>
</ui-button>
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-button-style="primary"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Create Group</span>
  </button>
</ui-button>
<ui-button ng-reflect-content="[object Object]">
  <button
    class="x-ui-button x-confirm"
    ng-reflect-ng-class="[object Object]"
    disabled=""
    type="button"
    data-button-style="danger"
    data-title-id="ExampleComponent.confirm"
  >
    <span>Create Group</span>
  </button>
</ui-button>

Recommendations 

Styling of delete buttons 

All delete buttons should use the .--alert visual state and --icon-delete icon, with the appropriate buttons style (default, primary or plain).

<button class="ds-button --icon-delete --alert">
  <span>Delete...</span>
</button>

<button class="ds-button --primary --icon-delete --alert">
  <span>Delete...</span>
</button>

<button class="ds-button --plain --icon-delete --alert">
  <span>Delete...</span>
</button>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<button class="ds-button --icon-delete --alert">
  <span>Delete...</span>
</button>

<button class="ds-button --primary --icon-delete --alert">
  <span>Delete...</span>
</button>

<button class="ds-button --plain --icon-delete --alert">
  <span>Delete...</span>
</button>

Buttons should be used when performing an action such as confirming or canceling a dialog, submitting a form or triggering a UI component.

Links should be preferred when performing an adjacent task such as navigating to a new page, opening a help document in a new window.