Switch

A Switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

Mecons Switch

<switch bc-label="Default Switch" />

Configuration

Icon

Set the bc-icon attribute to true to add an icon to the Switch.

Switch with Icon

<switch bc-label="Icon" bc-icon="true" />

Color

For proper styling of an Switch use the bc-color attribute.

Colored Switch

<switch bc-label="Success" bc-icon="true" bc-color="Success" checked />
<switch bc-label="Warning" bc-icon="true" bc-color="Warning" checked />
<switch bc-label="Info" bc-icon="true" bc-color="Info" checked />
<switch bc-label="Danger" bc-icon="true" bc-color="Danger" checked />

Outline

To render the Switch outline and inverse colors, set the bc-outline attribute to true.

Outlined Switch

<switch bc-label="Success" bc-icon="true" bc-color="Success" bc-outline="true" checked />
<switch bc-label="Warning" bc-icon="true" bc-color="Warning" bc-outline="true" checked />
<switch bc-label="Info" bc-icon="true" bc-color="Info" bc-outline="true" checked />
<switch bc-label="Danger" bc-icon="true" bc-color="Danger" bc-outline="true" checked />