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.

Example

<button type="button" class="bocss-button bocss-button--primary">
    Example Button
</button>

Shortcode


                [Button message="Example Button" type="button" style="primary"]

Type

You can 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" style="primary" type="button"]
            
                [Button message="Submit Button" style="primary" type="submit"]
            
                [Button message="Reset Button" style="primary" type="reset"]

Style

You can apply styles to change the button colour.

<button type="button" class="bocss-button bocss-button--primary">
    Primary Button
</button>

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

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

<button type="button" class="bocss-button bocss-button--destruct">
    Destruct Button
</button>

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

Shortcode


                [Button message="Primary Button" type="button" style="primary"]
            
                [Button message="Secondary Button" type="button" style="secondary"]
            
                [Button message="Tertiary Button" type="button" style="tertiary"]
            
                [Button message="Destruct Button" type="button" style="destruct"]
            
                [Button message="Success Button" type="button" style="success"]

Size

You can 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" type="button" style="primary" size="small"]
            
                [Button message="Large Button" type="button" style="primary" size="large"]

Full

You can span a button to fill the width of its container.

<button type="button" class="bocss-button bocss-button--primary bocss-button--full">
    Full Button
</button>

Shortcode


                [Button message="Full Button" type="button" style="primary" full="true"]

Parameters

Parameter	Values	Description
message	user-specified	Specifies the words to display on the button
type	button, submit, reset	Specifies the type of button
style	primary, secondary, tertiary, destruct, success	Specifies the style of the button, mainly its colour
size	small, large	Specifies the space around the text within the button
full	true, false	Allows the button to span the full width of its container
params	user-specified	Specifies any query parameters to append to the URL that the button links to
post_id	user-specified	Specifices the (page or post) ID on the current website that the button links to
url	user-specified	Specifies the URL for another website that the button links to
id	user-specified	Specifies the HTML ID for the button
name	user-specified	Specifies the HTML name for the button