egroupware_official/api/js/etemplate/Et2Button/Et2ButtonToggle.md

<et2-button-toggle></et2-button-toggle>

:::tip

There are multiple components for dealing with boolean yes / no.

• ButtonToggle: This one
• Checkbox: Classic checkbox
• Switch: Switch to turn something on or off
• SwitchIcon: Switch between two icons

:::

Examples

Variants

Use the variant attribute to set the button’s variant, same as regular buttons

<et2-button-toggle variant="default" label="Default"></et2-button-toggle>
<et2-button-toggle variant="primary" label="Primary"></et2-button-toggle>
<et2-button-toggle variant="success" label="Success"></et2-button-toggle>
<et2-button-toggle variant="neutral" label="Neutral"></et2-button-toggle>
<et2-button-toggle variant="warning" label="Warning"></et2-button-toggle>
<et2-button-toggle variant="danger" label="Danger"></et2-button-toggle>

Color

Buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by setting --indicator-color.

<style>et2-button-toggle { --indicator-color: purple;}</style>
<et2-button-toggle></et2-button-toggle>

Custom icon

Use the icon property to set the icon used

<et2-button-toggle icon="bell" ></et2-button-toggle>

Custom icons

Use the onIcon and offIcon properties to customise what is displayed

<et2-button-toggle onIcon="bell" offIcon="bell-slash"></et2-button-toggle>