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