Doggo Storybook 0.9.0

Toggle Button

Renders a button that toggles a state.

Read more Read less

Use this component to switch a feature or setting on or off, for example to toggle dark mode or mute/unmute sound.

See also button/1, button_link/1, and disclosure_button/1.

Usage

With a Phoenix.LiveView.JS command:

<.toggle_button on_click={JS.push("toggle-mute")} pressed={@muted}>
  Mute
</.toggle_button>

Accessibility

The button state is conveyed via the aria-pressed attribute and the button styling. The button text should not change depending on the state. You may however include an icon that changes depending on the state.

CSS

A toggle button can be identified with an attribute selector for the aria-pressed attribute.

// any toggle button regardless of state
button[aria-pressed] {}

// unpressed toggle buttons button[aria-pressed=”false”] {}

// pressed toggle buttons button[aria-pressed=”true”] {}

off
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
disabled :boolean
fill :string "solid"
Required on_click * %JS{} `Phoenix.LiveView.JS` command or event name to trigger when the button is clicked.
pressed :boolean false
rest :global
shape :string
size :string "normal"
variant :string "primary"
Required inner_block * :slot 
[Multiple values]