Button
Usage
Buttons are used primarily for actions, such as “Add”, “Continue”, “Cancel”, or “Save”. Ghost and Link buttons, which look similar to text hyperlink, are used for less important or less commonly used actions, such as “Learn More” or “Continue Later”
Button by type
Default button text
Usage : Use to highlight the most important actions in any experience. Don’t use more than one default button in a section or screen.
Default button icon
Usage : Use to highlight the most important actions in any experience. Icon button usually replacing button text to fill small space and choosen icon that resemble the function of the button.
Default button icon text
Usage : Use to highlight the most important actions in any experience. This button will be displayed before or after the text
Outline button Text
Usage : Used most in the interface. Only use another style if a button requires more or less visual weight.
Link button Text
Usage : Use a link button to navigate to another page. These should open in the same window unless information may be lost (for example, when someone is filling out a form), or when the destination is an external site (for example, a knowledge base article).
Button by state
Normal State button text
Usage : Use for default state of the button.
Hover State button text
Usage : Use for actions that currently being hovered. The button will remain at hovering state until user move the crusor to another area.
Focus State button text
Usage : Use for actions that currently being pressed. The button will remail pressed until user release current button.
Muted State button text
Usage : Use for actions that aren’t currently available. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.
Button by Size
Large Size button text
Usage : Use for actions that aren’t currently available. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.
Medium Size button text
Usage : Default size button that used in all over component. Used in component that have a big space.
Small Size button text
Usage : Small size button usually used in component that have smaller space like contextual bar, empty state and else
Xsmall Size button text
Usage : Xsmall size button usually used in component that have smallest space like table and else.