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