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>
<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 ds-button--hide-label" href="#">
<span>Button label</span>
</a>
<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 ds-button--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 .ds-button–disabled.

<a class="ds-button">
<span>Button label</span>
</a>
<a class="ds-button--icon-signin ds-button--disabled" href="#">
<span>Button label</span>
</a>
<a class="ds-button">
<span>Button label</span>
</a>
<a class="ds-button--icon-signin ds-button--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 ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>
Example using primary style
<button class="ds-button--primary ds-button--icon-warning ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>
Example using plain style
<button class="ds-button--plain ds-button--icon-warning ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--alert">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--warning">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--success">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-warning ds-button--info">
<span>Button label</span>
</button>

Component colors 

<button class="ds-button--color-magenta">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--color-magenta-shade">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--color-red-shade">
<span>Button label</span>
</button>
<button class="ds-button--color-magenta">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--color-magenta-shade">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--color-red-shade">
<span>Button label</span>
</button>

Icons 

Add an additional class such as ds-button--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 ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-online">
<span>Button label</span>
</button>

Icon position 

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

Example showing right aligned icons
<button class="ds-button--right-icon ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--right-icon ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--right-icon ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--right-icon ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--right-icon ds-button--icon-online">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--right-icon ds-button--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 ds-button--icon-online">
<span>Button label</span>
<i class="ds-icon--icon-arrow-right"></i>
</button>
<button class="ds-button 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 ds-icon--spin ds-icon--pulse"></i>
<span>Button label</span>
</button>
<button class="ds-button">
<i class="ds-icon--icon-refresh-cw ds-icon--spin ds-icon--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 ds-icon--color-celeste"></i>
<span>Button label</span>
</button>
<button class="ds-button">
<i class="ds-icon--icon-language ds-icon--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 ds-icon--small"></i>
<span>Button label</span>
</button>
<button class="ds-button">
<i class="ds-icon--icon-online ds-icon--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>
<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. ds-button--mid has a minimum width of 80px, and ds-button--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>
<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 ds-button--hide-label">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-cloud-connected ds-button--hide-label">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-cloud-connected ds-button--hide-label">
<span>Button label</span>
</button>
<button class="ds-button--icon-cloud-connected ds-button--hide-label">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--icon-cloud-connected ds-button--hide-label">
<span>Button label</span>
</button>
<button class="ds-button--plain ds-button--icon-cloud-connected ds-button--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).

ds-button--spin works with any icon on the available icon modifier list. This option will animate the icon in-place (and requires an existing ds-button--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 ds-button--spin">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--spin">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--icon-refresh-cw ds-button--spin">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--spin">
    <span>Button label</span>
  </button>
</div>
--pulse
<div>
  <button class="ds-button--icon-refresh-cw ds-button--pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--pulse">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--icon-refresh-cw ds-button--pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--pulse">
    <span>Button label</span>
  </button>
</div>
--glow
<div>
  <button class="ds-button--icon-refresh-cw ds-button--glow">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--glow">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--icon-refresh-cw ds-button--glow">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--glow">
    <span>Button label</span>
  </button>
</div>
--blink
<div>
  <button class="ds-button--icon-refresh-cw ds-button--blink">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--blink">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--icon-refresh-cw ds-button--blink">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--blink">
    <span>Button label</span>
  </button>
</div>
--spin and --pulse
<div>
  <button class="ds-button--icon-refresh-cw ds-button--spin ds-button--pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--spin ds-button--pulse">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--icon-refresh-cw ds-button--spin ds-button--pulse">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-refresh-cw ds-button--spin ds-button--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, ds-button--loading or ds-button--loading-refresh. Buttons in the loading state currently have a common look, regardless of the button style.

<button class="ds-button ds-button--loading">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--loading-refresh">
<span>Button label</span>
</button>
<button class="ds-button ds-button--loading">
<span>Button label</span>
</button>
<button class="ds-button--primary ds-button--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 ds-button--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 ds-button--notification" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification ds-button--info ds-button--hide-label" href="#">
<span>Button label</span>
</a>
<a class="ds-button--notification" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--notification" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification ds-button--info ds-button--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 ds-button--notification-success" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification-success ds-button--info ds-button--hide-label" href="#">
<span>Button label</span>
</a>
<a class="ds-button--notification-success" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--notification-success" href="#">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification-success ds-button--info ds-button--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 ds-button--notification" href="#" data-notification-counter="3">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification ds-button--info ds-button--hide-label" href="#" data-notification-counter="3">
<span>Button label</span>
</a>
<a class="ds-button--notification" href="#" data-notification-counter="3">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--notification" href="#" data-notification-counter="3">
<span>Button label</span>
</a>
<a class="ds-button--primary ds-button--icon-warning ds-button--notification ds-button--info ds-button--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-text-input by using the class ds-button--addon-light.

See show/hide password example.

<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input--mid" value="ABC123 XYZ890">
  <button id="test-button" class="ds-button--addon-light ds-button--hide-label ds-button--icon-visible">
    <span>Toggle password</span>
  </button>
</div>
<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input--mid" value="ABC123 XYZ890">
  <button id="test-button" class="ds-button--addon-light ds-button--hide-label ds-button--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>
<button class="ds-button--label">
<span>Button label</span>
</button>
Button with label style and icon
<button class="ds-button--label ds-button--icon-settings">
<span>Button label</span>
</button>
<button class="ds-button--label ds-button--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 ds-icon--icon-arrow-bottom"></i>
</button>
<button class="ds-button--label">
<span>Button label</span>
<i class="ds-icon--tiny ds-icon--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 ds-button--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 ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>

Disabled state:

Visual states (alert, warning, success, info, disabled):

<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 ds-button--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 ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>

Disabled state:

Visual states (alert, warning, success, info, disabled):

<div>
  <button class="ds-button--primary">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--primary ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert" disabled="disabled">
    <span>Button label</span>
  </button>
</div>

Disabled state:

Visual states (alert, warning, success, info, disabled):

<div>
  <button class="ds-button--plain">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--icon-signin" disabled="disabled">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--warning">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--warning">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--success">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--success">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--info">
    <span>Button label</span>
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--info">
    <span>Button label</span>
  </button>
</div>
<div>
  <button class="ds-button--plain ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--alert" disabled="disabled">
    <span>Button label</span>  
  </button>
  <button class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--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 ds-button--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 ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </a>
</div>
<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 ds-button--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 ds-button--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 ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button--primary ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button--primary ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--primary ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--primary ds-button--icon-signin ds-button--hide-label ds-button--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 ds-button--icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button--plain ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--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 ds-button--icon-signin">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label">
    <span>Button label</span>
  </a>
</div>
<p>Visual states (alert, warning, success, info, disabled):</p>
<div>
  <a class="ds-button--plain ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--alert" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--alert" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--warning" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--warning" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--success" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--success" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--info" href="#">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--info" href="#">
    <span>Button label</span>
  </a>
</div>
<div>
  <a class="ds-button--plain ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--alert">
    <span>Button label</span>
  </a>
  <a class="ds-button--plain ds-button--icon-signin ds-button--hide-label ds-button--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>
<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>
<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 .ds-button--alert visual state and ds-button--icon-delete icon, with the appropriate buttons style (default, primary or plain).

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

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

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

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

<button class="ds-button--plain ds-button--icon-delete ds-button--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.