Skip to content
MENU

Soracom

Design System

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

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 

Small, large 

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

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>

Addon text 

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

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

<div class="ds-field">
  <button class="ds-button --icon-time">
    <span class="ds-text--addon">Text</span>
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <button class="ds-button --icon-time">
    <span class="ds-text--addon">Text</span>
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>

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>

Styles 

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

Addon to field 

A ds-button can be displayed visually as part of an immediately preceding ds-input by using the class --addon-light.

See show/hide password example.

<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-input --mid" value="ABC123 XYZ890">
  <button id="test-button" class="ds-button --addon-light --hide-label --icon-visible">
    <span>Toggle password</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-input --mid" value="ABC123 XYZ890">
  <button id="test-button" class="ds-button --addon-light --hide-label --icon-visible">
    <span>Toggle password</span>
  </button>
</div>

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>

Tests 

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