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.


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 message="Example button"]


Choose an action type for a button.

<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
        Default button
<button type="submit" class="bocss-button bocss-button--primary bocss-button--small">
        Submit button
<button type="reset" class="bocss-button bocss-button--primary bocss-button--small">
        Reset button


                [Button message="Default button" type="button"]
                [Button message="Submit button" type="submit"]
                [Button message="Reset button" type="reset"]


Apply styles to change the colour of the button.

<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
        Primary style
<button type="button" class="bocss-button bocss-button--secondary bocss-button--small">
        Secondary style
<button type="button" class="bocss-button bocss-button--tertiary bocss-button--small">
        Tertiary style
<button type="button" class="bocss-button bocss-button--success bocss-button--small">
        Success style
<button type="button" class="bocss-button bocss-button--destruct bocss-button--small">
        Destruct style


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


Choose between two button sizes: small and large.

<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
        Small button
<button type="button" class="bocss-button bocss-button--primary bocss-button--large">
        Large button


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


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 message="Full width button" full="true"]


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