Button
Use a button to commit an action in a workflow, or to emphasize a link or call to action. For quick reference, see technical parameters.
Best practices
- Lead with strong, actionable verbs.
- If necessary, add words to clarify the action.
- Use sentence case.
Example
By default, the button component features a plain-text message.
<button type="button" class="bocss-button bocss-button--primary">
Example button
</button>
Shortcode
[Button message="Example button"]
Type
Choose an action type for a button.
<button type="button" class="bocss-button bocss-button--primary">
Default button
</button>
<button type="submit" class="bocss-button bocss-button--primary">
Submit button
</button>
<button type="reset" class="bocss-button bocss-button--primary">
Reset button
</button>
Shortcode
[Button message="Default button" type="button"]
[Button message="Submit button" type="submit"]
[Button message="Reset button" type="reset"]
Styles
Apply styles to change the colour of the button.
<button type="button" class="bocss-button bocss-button--primary">
Primary style
</button>
<button type="button" class="bocss-button bocss-button--secondary">
Secondary style
</button>
<button type="button" class="bocss-button bocss-button--tertiary">
Tertiary style
</button>
<button type="button" class="bocss-button bocss-button--success">
Success style
</button>
<button type="button" class="bocss-button bocss-button--destruct">
Destruct style
</button>
Shortcode
[Button message="Primary style" style="primary"]
[Button message="Secondary style" style="secondary"]
[Button message="Tertiary style" style="tertiary"]
[Button message="Success style" style="success"]
[Button message="Destruct style" style="destruct"]
Sizes
Choose between two button sizes: small and large.
<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
Small button
</button>
<button type="button" class="bocss-button bocss-button--primary bocss-button--large">
Large button
</button>
Shortcode
[Button message="Small button" size="small"]
[Button message="Large button" size="large"]
Full
Span a button to fill the width of its container.
<button type="button" class="bocss-button bocss-button--primary bocss-button--full">
Full width button
</button>
Shortcode
[Button message="Full width button" full="true"]
Parameters
Parameter | Values | Description |
---|---|---|
message | user-specified | Button label |
sr_message | user-specified | Screenreader message |
icon | user-specified | Icon to display |
type | button, submit, reset | Type of button |
style | primary, secondary, tertiary, success, destruct | Button style (mainly colour) |
size | small, large | Determines the button’s clickable space |
full | true, false | Allows the button to fill the width of its container |
params | user-specified | Query parameters to be added at the end of the URL the button links to |
post_id | user-specified | Page or post ID the button links to |
url | user-specified | URL of an external website the button links to |
id | user-specified | Button’s HTML ID |
name | user-specified | Button’s HTML name |