Primary button filled
Used for main actions and is the most noticeable button on a page, should only appear once per screen
<button class="ds-btn ds-btn-primary">Primary</button>
Buttons
Buttons are clickable elements that are used to trigger actions .
Primary button outlined
For secondary actions on each page. These buttons can only be used in conjunction with a primary button filled.
<button class="ds-btn ds-btn-outline ds-btn-primary">Primary</button>
Primary button text
For less prominent, and sometimes independent, actions. These buttons can be used in isolation or paired with a primary button filled when there are multiple calls to action.
<button class="ds-btn ds-btn-text ds-btn-primary">Primary</button>
Danger button
For actions that could have destructive effects like delete.
<button class="ds-btn ds-btn-danger">Danger</button>
Grey button
This can be used in situations where some actions are done on the same UI other than the actions by primary or secondary buttons.
<button class="ds-btn ds-btn-grey">Close</button>
Small button
Small buttons are the least sized buttons. This size could be bring by adding the class .ds-btn-sm
<button class="ds-btn ds-btn-primary ds-btn-sm">Save Changes</button>
Medium button
This is the default size of all the button types. This size would be also bring by without adding its class name .ds-btn-md
<button class="ds-btn ds-btn-primary ds-btn-md">Save Changes</button>
Large button
This is the third level of button up sizing. The size could be bring by adding the class .ds-btn-lg
<button class="ds-btn ds-btn-primary ds-btn-lg">Save Changes</button>
Extra large button
This is the most highest available level of button up sizing. The size could be bring by adding the class .ds-btn-xl
<button class="ds-btn ds-btn-primary ds-btn-xl">Save Changes</button>
Button with text
This is the default button style with text and fixed padding. There is not any extra elements inside the button other than its label.
<button class="ds-btn ds-btn-primary ds-btn-md">Save Changes</button>
Text with right icon
<button class="ds-btn ds-btn-primary">Change theme <i class="icon-appearance"></i></button>
Text with left icon
<button class="ds-btn ds-btn-primary"><i class="icon-appearance"></i>Change theme</button>
Icon in square
<button class="ds-btn ds-btn-primary ds-btn-icon"><i class="icon-appearance"></i></button>
Icon in circle
<button class="ds-btn ds-btn-primary ds-btn-icon-circle "><i class="icon-appearance"></i></button>
Block level button
<button class="ds-btn ds-btn-primary ds-btn-md ds-block-btn">Button</button>
Theme buttons
<button class="ds-btn ds-btn-primary">Primary</button>
<button class="ds-btn ds-btn-secondary">Secondary</button>
<button class="ds-btn ds-btn-grey">Grey</button>
<button class="ds-btn ds-btn-danger">Danger</button>
<button class="ds-btn ds-btn-information">Information</button>
<button class="ds-btn ds-btn-success">Success</button>
<button class="ds-btn ds-btn-warning">Warning</button>
Theme text buttons
<button class="ds-btn ds-btn-text ds-btn-primary">Primary text </button>
<button class="ds-btn ds-btn-text ds-btn-secondary">Secondary text </button>
<button class="ds-btn ds-btn-text ds-btn-grey">Grey text </button>
<button class="ds-btn ds-btn-text ds-btn-danger">Danger text </button>
<button class="ds-btn ds-btn-text ds-btn-information">Information text </button>
<button class="ds-btn ds-btn-text ds-btn-success">Success text </button>
<button class="ds-btn ds-btn-text ds-btn-warning">Warning text </button>
Primary buttons with shade
<button class="ds-btn ds-btn-primary-100">primary-100</button>
<button class="ds-btn ds-btn-primary-200">primary-200</button>
<button class="ds-btn ds-btn-primary-300">primary-300</button>
<button class="ds-btn ds-btn-primary-400">primary-400</button>
<button class="ds-btn ds-btn-primary-500">primary-500</button>
<button class="ds-btn ds-btn-primary-600">primary-600</button>
Theme group buttons
<div class="ds-btn-group btn-group-drop"><button class="ds-btn ds-btn-primary">left</button><button class="ds-btn ds-btn-primary">right</button></div>
Loading
The loading button is used to indicate that data is being retrieved or the user’s request is being processed.
<button class="ds-btn ds-btn-primary has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-secondary has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-grey has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-danger has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-information has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-success has-loading ds-btn-loading">Loading</button>
<button class="ds-btn ds-btn-warning has-loading ds-btn-loading">Loading</button>
Guidelines
- Important buttons should be immediately visible to the user without scrolling.
- Write button text in the title case when the text is five words or fewer.
- Use task-specific words for button text.
- For text longer than five words, use sentence case.