Buttons provide users the ability to interact with the web page.
Both <button> elements and <a>
anchor elements can be styled as buttons.
While their behaviours may be similar, they mean different things semantically
and have accessibility considerations.
When you should use this component
You should use buttons for important actions that you want the user to take like send message or save to draft.
Button labels should be clear and specific to the action that the user is taking.
Secondary buttons should be used to indicate less common actions and have less prominance as compared to primary buttons.
In the examples below, you can reference on how to group buttons, insert icons, attach controls and style text links.
When you should use something else
If you are linking within pages in a site, you can use regular text links instead.
You can also insert icons from our library on any part of a button.
You can group buttons together on a single line using the sgds-buttons modifier on container.
has-addons modifier allows you to attach controls together
You can use the secondary button for reducing visual prominence.
It should not be used as a call to action button
Button with width that span the full width of a parent
Display button in border only
Display button with rounded edges
Display as a non-interactive button.
Use as an attribute for disable state
Having troubles with the guide? Please give us more details and we'll get back to you soon.