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”] {}

Default Open in playground
off
<div>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-default")
  |> JS.toggle(to: "#indicator-off-default")
  }>
    click me
  </.toggle_button>
  <div id="indicator-on-default" hidden>on</div>
  <div id="indicator-off-default">off</div>
</div>
Disabled Open in playground 
<.toggle_button disabled on_click={%JS{ops: []}}>
  click me
</.toggle_button>
Variant Open in playground
off
<div>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="primary">
    primary
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="secondary">
    secondary
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="info">
    info
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="success">
    success
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="warning">
    warning
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  } variant="danger">
    danger
  </.toggle_button>
  <div id="indicator-on-variant" hidden>on</div>
  <div id="indicator-off-variant">off</div>
</div>
Size Open in playground
off
<div>
  <.toggle_button size="small" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }>
    small
  </.toggle_button>
  <.toggle_button size="normal" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }>
    normal
  </.toggle_button>
  <.toggle_button size="medium" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }>
    medium
  </.toggle_button>
  <.toggle_button size="large" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }>
    large
  </.toggle_button>
  <div id="indicator-on-size" hidden>on</div>
  <div id="indicator-off-size">off</div>
</div>
Fill Open in playground
off
<div>
  <.toggle_button fill="solid" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }>
    solid
  </.toggle_button>
  <.toggle_button fill="outline" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }>
    outline
  </.toggle_button>
  <.toggle_button fill="text" on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }>
    text
  </.toggle_button>
  <div id="indicator-on-fill" hidden>on</div>
  <div id="indicator-off-fill">off</div>
</div>
Shape Open in playground
off
<div>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  } shape={nil}>
    nil
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  } shape="circle">
    circle
  </.toggle_button>
  <.toggle_button on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  } shape="pill">
    pill
  </.toggle_button>
  <div id="indicator-on-shape" hidden>on</div>
  <div id="indicator-off-shape">off</div>
</div>