BLOX Button

Empty blox-button

An empty blox-button will render with a 1:1 aspect ratio

<blox-button></blox-button>

Button with name property

The button will get the name parameter set on it.

<blox-button name="test-button"></blox-button>

Button with value property

The button will get the value parameter set on it.

<blox-button value="three"></blox-button>

Href property

A button with the href property will be rendered as a link element.

<blox-button href="../"></blox-button>

Elements that are a tags under the hood have additional properties exclusive to a tags.

Rel

<blox-button href="../" rel="prev"><blox-button>

Target

<blox-button href="../" target="_self"><blox-button>

Download

A button with the download property will also be rendered as a link element even if the href property is not set.

<blox-button download="index.html"><blox-button>

Simple text in the default slot

For basic use cases, you can simply place button text within the default slot of the blox-button element. Any button with text will get an automatic aspect ratio and padding to contain the text.

<blox-button>text</blox-button>

Multiple default slot elements

Multiple elements placed within the default slot will display in order.

<blox-button>
    before cow
    <blox-icon icon="cow"></blox-icon>
    after cow
</blox-button>

They will be separated by a gap that can be adjusted using the --blox-button-column-gap css variable.

For a button with special styling needs, two named slots are provided.

prefix and postfix

<blox-button>
    <span slot="prefix">prefix</span>
    <span>default</span>
    <span slot="postfix">postfix</span>
</blox-button>

Items placed within the prefix slot will normally sort before any items placed in the default slot.

Similarly, items placed within the postfix slot will normally sort after any items placed in the default slot.

<blox-button>
    <span slot="postfix">1</span><span slot="postfix">2</span><span slot="postfix">3</span>
    <span>1</span><span>2</span><span>3</span>
    <span slot="prefix">1</span><span slot="prefix">2</span><span slot="prefix">3</span>
</blox-button>

The order of these elements within the button can be affected using the reverse property.

This sets flex-direction: row reverse on the base part.

<blox-button reverse>
    <span slot="prefix">1</span><span slot="prefix">2</span><span slot="prefix">3</span>
    <span slot="postfix">1</span><span slot="postfix">2</span><span slot="postfix">3</span>
    <span>1</span><span>2</span><span>3</span>
</blox-button>

If the only item in the default slot is a blox-icon, the component will render as a 1:1 aspect ratio square with the icon centered within it.

<blox-button><blox-icon icon="square" /></blox-button>

This is unaffected by whitespace.

<blox-button> <blox-icon icon="circle"/> </blox-button>
<blox-button>
    <blox-icon icon="square"></blox-icon>
</blox-button>

Square display

If the square property is set, the 1:1 aspect ratio mode can be triggered even with text.

<blox-button square>@</blox-button>

Be aware in square mode, the height of the element will scale with the width of its content.

<blox-button square>This button will be a large square.</blox-button>

Circle display

The circle property also forces the 1:1 aspect ratio, with the added effect of changing the border radius to draw a circle.

<blox-button circle><blox-icon icon="circle"/></blox-button>
<blox-button circle>@</blox-button>

As with the square, the height of the circle will scale with the width of its content.

<blox-button circle>This button will be a large circle.</blox-button>

Rectangular display

An icon element placed in a named slot will display as a rectangle with the same side padding as a text button.

will have side padding because it is a prefix element
<blox-button><blox-icon slot="prefix" icon="square"></blox-icon></blox-button>

will not have side padding
<blox-button><blox-icon icon="square"></blox-icon></blox-button>

blox-button elements are inline by default.

Inline with button: Button on same line?

Inline with icon: on same line?

Inline with circle: on the same line?

Inline with padded icon: on the same line?

Inline with padded text: text on the same line?

Inline with both: Button icon and text on same line?

Inline with both: Button text and icon on the same line?

Inline padded with both: Button icon and text on same line?

Inline padded with both: Button text and icon on the same line?

blox-button elements can be made into block elements by including the "block" parameter.

<blox-button block></blox-button>

Block buttons fill their container element. This should be half the width of the other block elements.

The blox button component supports a number of modes and variants. By default the button displays a grey filled in area around the text.

<blox-button variant="primary">primary</blox-button>

All variants of modes of the button besides the link will react to the 'outline' parameter.

<blox-button outline></blox-button>

Padded display mode removes the filled in area, but keeps the padding

<blox-button padded>link</blox-button>

Most display modes support the outline property, with the exception of the padded mode.

<blox-button variant="attract" icon="square" outline></blox-button>
<blox-button variant="attract" icon="circle" circle outline></blox-button>
<blox-button variant="attract" outline><blox-icon slot="prefix" icon="cow"></blox-icon></blox-button>
<blox-button variant="attract" padded outline>no effect on link</blox-button>

The button supports three sizes, small, medium (default), and large.

<blox-button size="small">small</blox-button>
<blox-button>default</blox-button>
<blox-button size="medium">medium</blox-button>
<blox-button size="large">large</blox-button>

All modes with text, icon, and text + icon

slot test with text

slot test with icons and text

testing slotted icons

Disabled button widgets become unresponsive to user input.

The loading property causes the button to display a loading spinner.