Digital Design System
Buttons
On this page we will go through our buttons component
The buttons are used everywhere on the website for different purposes and actions such as forms, CTAs and campaigns…
Below you will find the different definitions and options to create your buttons
Table of contents
Overview
Global Definition
Each button is based on a global CSS class called "msds-btn". It is important to include it first as it is the main CSS class. Without it there is no button component. You can find mainly 2 types of buttons, the default button which is without an icon and one with a icon.
Default Button (without an icon)
Button with an icon
<div class="row">
<div class="col-6">
<h3>Default Button (without an icon)</h3>
<button type="button" class="msds-btn msds-btn--primary">Read More</button>
</div>
<div class="col-6">
<h3>Button with an icon</h3>
<button type="button" class="msds-btn msds-btn--primary ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Sizes
Our buttons can be rendered in 3 different sizes, large, medium and small as followed
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<div class="msds-btn-group--left">
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Enabled</button>
</div>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<div class="msds-btn-group--left">
<button type="button" class="msds-btn msds-btn--primary">Enabled</button>
</div>
</div>
<div class="col-4">
<h3>Small</h3>
<div class="msds-btn-group--left">
<button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Enabled</button>
</div>
</div>
</div>States
Each button has different states which are applied automatically: enabled, hover, active, focus and disabled. You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.
<div class="row">
<div class="col-12">
<div class="msds-btn-group--left">
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Enabled</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
icon, enabled
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Hover</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
With icon, hover
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Active (press it)</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
With icon, active (pressed)
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Focus (use tab key or clicked on it)</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
With icon, focus
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg" tabindex="-1" disabled>Disabled</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg " tabindex="-1" disabled>
With icon, disabled
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>
</div>Direction
In some circumstances when having a button with a icon, we would like to render the icon on the left side of the button. To do so, you just need to replace "msds-btn--icon" by the following CSS class: "msds-btn--icon-left"
Default alignment (icon aligned right)
Icon aligned left
<div class="row">
<div class="col-6">
<h3>Default alignment (icon aligned right)</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-6">
<h3>Icon aligned left</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg msds-btn--icon-left">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>
Primary Button
To use a primary button you need to add the following CCS class: "msds-btn--primary".
Below is a example of the Milestone Primary button. The default Primary button is without an icon as mentioned in the global definition previously.
Primary Button Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--primary">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Read more</button>
</div>
</div>Primary Button With An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--primary ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--primary msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>
Secondary Button
To use a Secondary button you need to add the following CCS class: "msds-btn--secondary".
Below are few examples of the Milestone Secondary button. The default Secondary button is without an icon as mentioned in the global definition previously.
Secondary Button Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--secondary">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">Read more</button>
</div>
</div>
Secondary Button With An Icon
Large
Medium (default)
Small
Primary Button Dark Theme
To use a Primary Dark Themed buttons you need to add the following CCS class: "msds-btn--primary-dark".
Below are few examples of the Milestone Primary Dark Themed button. The default Primary Dark Themed button has no icon as mentioned in the global definition previously.
Without an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--primary-dark">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--sm">Read more</button>
</div>
</div>
With an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--primary-dark ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Secondary Button Dark Theme
To use a Secondary Dark Themed buttons you need to add the following CCS class: "msds-btn--secondary-dark".
Below are few examples of the Milestone Secondary Dark Themed button. The default Secondary Dark Themed button has no icon as mentioned in the global definition previously.
Secondary Button Dark Theme Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm">Read more</button>
</div>
</div>
Secondary Button Dark Theme With An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Danger Button Dark Theme
To use a Danger Dark Themed buttons you need to add the following CCS class: "msds-btn--danger-dark".
Below are few examples of the Milestone Danger Dark Themed button. The default Danger Dark Themed button has no icon as mentioned in the global definition previously.
Without an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--lg">Danger dark</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--danger-dark">Danger dark</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--sm">Danger dark</button>
</div>
</div>
With an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--lg ">
Danger dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--danger-dark ">
Danger dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--sm ">
Danger dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Disabled Button Dark Theme
To apply a Disabled Dark Themed button state, you need to add the "disabled" CCS attribute to buttons that have one the following CSS classes:
"msds-btn--primary-dark", "msds-btn--secondary-dark" or "msds-btn--danger-dark".
Below are few examples of the Milestone Disabled Dark Themed button. The default Disabled Dark Themed button has no icon as mentioned in the global definition previously.
Without an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--lg" disabled>Disabled dark</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark" disabled>Disabled dark</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--sm" disabled>Disabled dark</button>
</div>
</div>
With an icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--primary-dark msds-btn--lg " disabled>
Disabled dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--secondary-dark " disabled>
Disabled dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger-dark msds-btn--sm " disabled>
Disabled dark
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Tertiary Button
To use a Tertiary button you need to add the following CCS class: "msds-btn--tertiary".
Below are few examples of the Milestone Tertiary button. The default Tertiary button is without an icon as mentioned in the global definition previously.
Tertiary Button Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--tertiary">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm">Read more</button>
</div>
</div>Tertiary Button With An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--tertiary ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Gray Button
To use a Gray button you need to add the following CCS class: "msds-btn--gray".
Below are few examples of the Milestone Gray button. The default Gray button is without an icon as mentioned in the global definition previously.
Gray Button Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--gray msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--gray">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--gray msds-btn--sm">Read more</button>
</div>
</div>
Gray Button With An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--gray msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--gray ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--gray msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Danger Button
To use a Danger button you need to add the following CCS class: "msds-btn--danger".
Below are few examples of the Milestone Danger button. The default Danger button is without an icon as mentioned in the global definition previously.
Danger Button Without An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Read more</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--danger">Read more</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger msds-btn--sm">Read more</button>
</div>
</div>Danger Button With An Icon
Large
Medium (default)
Small
<div class="row">
<div class="col-4">
<h3>Large</h3>
<button type="button" class="msds-btn msds-btn--danger msds-btn--lg ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Medium (default)</h3>
<button type="button" class="msds-btn msds-btn--danger ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
<div class="col-4">
<h3>Small</h3>
<button type="button" class="msds-btn msds-btn--danger msds-btn--sm ">
Read more
<div class="msds-icon"><svg><use href="../../../msds-spritemap.svg#publish" /></svg></div>
</button>
</div>
</div>Button Group
In few cases, we will need to have several buttons and in order to render them and space them correctly, you will need to use a parent element using the following CSS classes: "msds-btn-group--left" or "msds-btn-group--right". It all depends where you would like to align your buttons.
Below are few examples:
Left Alignment
<div class="row">
<div class="col-12">
<div class="msds-btn-group">
<button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Delete</button>
<button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Edit</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Add New</button>
</div>
</div>
</div>Center Alignment
<div class="row">
<div class="col-12">
<div class="msds-btn-group msds-btn-group--center">
<button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Delete</button>
<button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Edit</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Add New</button>
</div>
</div>
</div>Right Alignment
<div class="row">
<div class="col-12">
<div class="msds-btn-group msds-btn-group--right">
<button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Delete</button>
<button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Edit</button>
<button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Add New</button>
</div>
</div>
</div>