Skip to main content

Toggle Content

Pattern
Live

The Toggle Content pattern allows users to show and hide snippets of content.

FigmaCode

Usage​

The Toggle Content component initially hides content, allowing users to selectively reveal additional information as needed. It helps users access content without creating information overload in an interface.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { ToggleContent } from "@iag/chroma-react-ui.components";

When to use​

Use the Toggle Content component to present one-off pieces of supplementary information within a user's context. It's particularly useful for showing/hiding additional descriptions or specifications that are not essential for all users but may be useful for some.

When to avoid​

Avoid using Toggle Content for critical or essential information that all users need to see immediately. Also avoid for multiple pieces of optional content, consider the Accordion component.

Do

  • Use descriptive labels to improve content discovery.

Don't

  • Use for content that must always be visible or is crucial to the user task.
  • Use to hide lengthy content. Consider content simplification or redesign first.