Doggo Storybook 0.9.0

Disclosure Button

Renders a button that toggles the visibility of another element.

Read more Read less

Use this component to reveal or hide additional content, such as in collapsible sections or dropdown menus.

For a button that toggles other states, use toggle_button/1 instead. See also button/1 and button_link/1.

Usage

Set the controls attribute to the DOM ID of the element that you want to toggle with the button.

The initial state is hidden. Do not forget to add the hidden attribute to the toggled element. Otherwise, visibility of the element will not align with the aria-expanded attribute of the button.

<.disclosure_button controls="data-table">
  Data Table
</.disclosure_button>

CSS

To select disclosure buttons without class names and to apply styles depending on the state (e.g. to render a caret), you can use the aria-controls and aria-expanded attributes.

button[aria-controls][aria-expanded] {
  /* Base styles for disclosure buttons */
}

button[aria-controls][aria-expanded=”true”] { / Styles when content is visible / }

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. []
Required controls * :string The DOM ID of the element that this button controls.
rest :global
variant :string "primary"
Required inner_block * :slot 
Learn More About Dog Breeds