Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. 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.

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<button class="ds-button">
  <i class="ds-icon --icon-online --small"></i>
  <span>Button label</span>
</button>

Size

xxsmall, xsmall, small, default, large

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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;

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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>

--blink

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<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.

html
Copy 
<!-- 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

html
Copy 
<!-- 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

html
Copy 
<button class="ds-button --link">
  <span>Button link</span>
</button>

Button with link style and icon

html
Copy 
<button class="ds-button --link --icon-settings">
  <span>Button link</span>
</button>

Button with link style and tiny inline icon

html
Copy 
<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

html
Copy 
<button class="ds-button --label">
  <span>Button label</span>
</button>

Button with label style and icon

html
Copy 
<button class="ds-button --label --icon-settings">
  <span>Button label</span>
</button>

Button with label style and tiny inline icon

html
Copy 
<button class="ds-button --label">
  <span>Button label</span>
  <i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>

Button with label style

html
Copy 
<button class="ds-button --menu">
  <span>Menu</span>
</button>

Inside ds-header

html
Copy 
<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="ds-menu --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

html
Copy 
<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

html
Copy 
<!-- 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

html
Copy 
<button class="ds-button --icon-edit --in-place">
  <span>Close</span>
</button>

Tests

ds-tag inside ds-button

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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).

html
Copy 
<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>

When to use a button vs a text link

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.