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>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>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>Visual states
All 3x buttons styles (default, primary and plain) adhere to 4x preset visual states - alert, warning, success and info.
<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><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><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>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>Icon position
Adding the class --right-icon will show the button on the right of the button.
<button class="ds-button --right-icon --icon-online">
<span>Button label</span>
</button>
<button class="ds-button --primary --right-icon --icon-online">
<span>Button label</span>
</button>
<button class="ds-button --plain --right-icon --icon-online">
<span>Button label</span>
</button>Inline icons
Alternatively ds-icon can be used inside ds-button if necessary. This can be used when more than one icon is required, or if more control over the icon is required.
<button class="ds-button --icon-online">
<span>Button label</span>
<i class="ds-icon --icon-arrow-right"></i>
</button>
<button class="ds-button --primary --icon-online">
<span>Button label</span>
<i class="ds-icon --icon-arrow-right"></i>
</button>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>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>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>Size
xxsmall, xsmall, small, default, large
<button class="ds-button --xxsmall">
<span>XxSmall size</span>
</button>
<button class="ds-button --xsmall">
<span>XSmall size</span>
</button>
<button class="ds-button --small">
<span>Small size</span>
</button>
<button class="ds-button">
<span>Default size</span>
</button>
<button class="ds-button --large">
<span>Large size</span>
</button><button class="ds-button --icon-signin --xxsmall">
<span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --xsmall">
<span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --small">
<span>Small size</span>
</button>
<button class="ds-button --icon-signin">
<span>Default size</span>
</button>
<button class="ds-button --icon-signin --large">
<span>Large size</span>
</button><button class="ds-button --icon-signin --hide-label --xxsmall">
<span>XxSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --xsmall">
<span>XSmall size</span>
</button>
<button class="ds-button --icon-signin --hide-label --small">
<span>Small size</span>
</button>
<button class="ds-button --icon-signin --hide-label">
<span>Default size</span>
</button>
<button class="ds-button --icon-signin --hide-label --large">
<span>Large size</span>
</button>mid, wide
By default, ds-button will be a minimum of 40px wide. --mid has a minimum width of 80px, and --wide has a minimum width of 160px;
<button class="ds-button --mid">
<span>Mid</span>
</button>
<button class="ds-button">
<span>Def</span>
</button>
<button class="ds-button --wide">
<span>Wide</span>
</button>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>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.
<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><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><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><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>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>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>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>Text addon inside buttons
ds-text can be used inside ds-button. See ds-text for further examples.
ds-button can also act as an addon to a field, see below.
Buttons inside other components
When ds-button is used inside ds-select, ds-input, or ds-range it will be displayed next to the element and will not wrap when the window is scaled.
<!-- Inside ds-input -->
<div class="ds-input">
<button class="ds-button">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-input ds-button primary -->
<div class="ds-input">
<button class="ds-button --primary">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button --primary">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-input ds-button plain -->
<div class="ds-input">
<button class="ds-button --plain">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button --plain">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
<button class="ds-button">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select ds-button primary-->
<div class="ds-select">
<button class="ds-button --primary">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button --primary">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select ds-button plain-->
<div class="ds-select">
<button class="ds-button --plain">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button --plain">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-range -->
<div class="ds-range">
<input type="range">
<button class="ds-button">
<span>Button label</span>
</button>
</div>
<div class="ds-range">
<button class="ds-button">
<span>Button label</span>
</button>
<input type="range">
</div>
<!-- Inside ds-range ds-button primary-->
<div class="ds-range">
<input type="range">
<button class="ds-button --primary">
<span>Button label</span>
</button>
</div>
<div class="ds-range">
<button class="ds-button --primary">
<span>Button label</span>
</button>
<input type="range">
</div>
<!-- Inside ds-range ds-button plain-->
<div class="ds-range">
<input type="range">
<button class="ds-button --plain">
<span>Button label</span>
</button>
</div>
<div class="ds-range">
<button class="ds-button --plain">
<span>Button label</span>
</button>
<input type="range">
</div>Addon button
The --addon styles slightly modify the button to ‘join’ the containing component.
Addon default style
<!-- Inside ds-input -->
<div class="ds-input">
<button class="ds-button --addon">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button --addon">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-input ds-button primary-->
<div class="ds-input">
<button class="ds-button --primary --addon">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button --primary --addon">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-input ds-button plain-->
<div class="ds-input">
<button class="ds-button --plain --addon">
<span>Button label</span>
</button>
<input type="text"/>
</div>
<div class="ds-input">
<input type="text"/>
<button class="ds-button --plain --addon">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
<button class="ds-button --addon">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button --addon">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select ds-button primary -->
<div class="ds-select">
<button class="ds-button --primary --addon">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button --primary --addon">
<span>Button label</span>
</button>
</div>
<!-- Inside ds-select ds-button plain -->
<div class="ds-select">
<button class="ds-button --plain --addon">
<span>Button label</span>
</button>
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
</div>
<div class="ds-select">
<select>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
<option value="US">United States of America</option>
</select>
<button class="ds-button --plain --addon">
<span>Button label</span>
</button>
</div>Styles
Custom styles exist for specific use cases. See also the basic buttons styles.
Link style
Buttons can be styled as links.
<button class="ds-button --link --icon-settings">
<span>Button link</span>
</button><button class="ds-button --link">
<span>Button link</span>
<i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>Label style
Buttons can be styled as labels. A common usage would be in ds-datatable th headers for sorting columns.
<button class="ds-button --label --icon-settings">
<span>Button label</span>
</button><button class="ds-button --label">
<span>Button label</span>
<i class="ds-icon --tiny --icon-arrow-bottom"></i>
</button>Menu style
<header class="ds-header --dark">
<details class="ds-menubutton" role="menu">
<summary>
<span class="ds-button --menu --hide-label">
<span>Menu</span>
</span>
</summary>
<div class="__content --mid">
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</div>
</details>
<h1 class="ds-logo">Soracom</h1>
<h2 class="ds-text">User console</h2>
</header>Feature style
<button class="ds-button --feature --icon-order">
<span>
<span class="ds-text --label --small">Orders</span>
<span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
</span>
</button>
<button class="ds-button --primary --feature --icon-order">
<span>
<span class="ds-text --label --small">Orders</span>
<span class="ds-text --xsmall">Order SIM Cards, Devices and Kits</span>
</span>
</button>Close style
<!-- Small -->
<button class="ds-button --small __close">
<span>Close</span>
</button>
<button class="ds-button --small --primary __close">
<span>Close</span>
</button>
<!-- Default -->
<button class="ds-button __close">
<span>Close</span>
</button>
<button class="ds-button --primary __close">
<span>Close</span>
</button>
<!-- Large -->
<button class="ds-button --large __close">
<span>Close</span>
</button>
<button class="ds-button --large --primary __close">
<span>Close</span>
</button>in-place
--in-place is a shortcut class, often used in a datatable, when a button needs to sit adjacent to text for editing purposes. It is equivilent to ds-button.--xxsmall.--plain.--hide-label.
<button class="ds-button --icon-edit --in-place">
<span>Close</span>
</button>Tests
ds-tag inside ds-button
<button class="ds-button --icon-signin">
<span class="ds-tag">
<span><strong>Info</strong>Tag text</span>
</span>
</button>
<button class="ds-button --icon-signin">
<span class="ds-tag">
<span><strong>Info</strong>Tag text</span>
</span>
<span class="ds-tag">
<span><strong>Info</strong>Tag text</span>
</span>
</button><button>
<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><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><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>
<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><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><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>
<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]"
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>When to use a button vs a text link
Buttons should be used when performing an action such as confirming or canceling a dialog, submitting a form or triggering a UI component.
Links should be preferred when performing an adjacent task such as navigating to a new page, opening a help document in a new window.