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 bocss-button--small">
        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 bocss-button--small">
        Default button
</button>

<button type="submit" class="bocss-button bocss-button--primary bocss-button--small">
        Submit button
</button>

<button type="reset" class="bocss-button bocss-button--primary bocss-button--small">
        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 bocss-button--small">
        Primary style
</button>

<button type="button" class="bocss-button bocss-button--secondary bocss-button--small">
        Secondary style
</button>

<button type="button" class="bocss-button bocss-button--tertiary bocss-button--small">
        Tertiary style
</button>

<button type="button" class="bocss-button bocss-button--success bocss-button--small">
        Success style
</button>

<button type="button" class="bocss-button bocss-button--destruct bocss-button--small">
        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--small 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