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.

Type

Choose an action type for a button.


                        [Button message="Default button" type="button"]
                    

                        [Button message="Submit button" type="submit"]
                    

                        [Button message="Reset button" type="reset"]
                    
<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>

Styles

Apply styles to change the colour of the button.


                        [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"]
                    
<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>

Sizes

Choose between two button sizes: small and large.


                        [Button message="Small button" size="small"]
                    

                        [Button message="Large button" size="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>

Full

Span a button to fill the width of its container.


                        [Button message="Full width button" full="true"]
                    
<button type="button" class="bocss-button bocss-button--primary bocss-button--small bocss-button--full">
        Full width button
</button>

Parameters

Parameter Values Description
full true, false Allows the button to fill the width of its container
icon user‑specified Icon to display
id user‑specified Button’s HTML ID
message user‑specified Button label
name user‑specified Button’s HTML name
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
size small, large Determines the button’s clickable space
sr_message user‑specified Screenreader message
style primary, secondary, tertiary, success, destruct Button style (mainly colour)
type button, submit, reset Type of button
url user‑specified URL of an external website the button links to