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.
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
is-grouped modifier on the field 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
|is-fullwidth||Button with width that span the full width of a parent|
|is-outlined||Display button in border only|
|is-rounded||Display button with rounded edges|
|is-static||Display as a non-interactive button.|
|disabled||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.Chat with the team