Buttons allow users to take actions, and make choices, with a single tap.
<button> elements and
elements can be styled as buttons. While their behaviours may be similar,
they mean different things semantically and have different
In the examples below, you can find references on how to group buttons,
insert icons, attach controls and style text links.
You can 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 the container.
You can attach controls together with the
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
When to use
Buttons should be used for:
- Important actions that you want your users to take.
- For example, send messages or save drafts.
- Button labels should be clear and specific to the users.
Secondary buttons should be used to indicate less common actions.
They should also have less prominence as compared to primary buttons.
Buttons should not be used for:
- Linking pages in a site.
- You should consider using regular texts links instead.
Having troubles with the guide? Please give us more details and we'll get back to you soon.
Chat with the team