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

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>

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>

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>

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>

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