Pricing

ExpandButton

Figma Source code

Switch between expanded and collapsed states with consistent button feedback.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use ExpandButton to expand or restore content. When a host such as CodeBlock already offers the action, configure that host instead of maintaining two expansion states.

  • Receive state through bind:expanded or onExpandedChange; defaultExpanded supplies the initial value.

  • The component only provides the expand action. The page connects its state to the actual content; it does not create or control the panel.

Import

import { ExpandButton } from '@snowui-design-system/components';

Usage

Variants

API Reference

Property Type Default Example Description
expanded boolean — expanded Current expanded state; supports bind:expanded and falls back to defaultExpanded when undefined. Clicking writes the new boolean. The caller shows or hides the content region.
defaultExpanded boolean false defaultExpanded Fallback while expanded is undefined. After the first click, the component-written expanded state takes over.
ariaLabel string — ariaLabel="Example" Accessible Button name while collapsed; should describe the expand action that will occur. Defaults to Expand in English; LocaleProvider supplies the corresponding Chinese label.
collapseAriaLabel string — collapseAriaLabel="Example" Accessible Button name while expanded; should describe the collapse action that will occur. Defaults to Collapse in English; LocaleProvider supplies the corresponding Chinese label.
icon Snippet —（arrows-out-simple） icon={iconContent} Custom icon while collapsed. Only changes graphics; the component still owns expanded state and aria-expanded.
collapseIcon Snippet —（arrows-in-simple） collapseIcon={collapseIconContent} Custom icon while expanded, replacing the existing content transition.
children Snippet — <ExpandButton>Content</ExpandButton> Custom content after the icon. Without it, Button.iconOnly is enabled. The component does not create or control the expanded panel.
onExpandedChange (expanded: boolean) => void — onExpandedChange={(value) => { /* handle value */ }} Receives the new state after a click, before onclick. External assignment does not trigger it.
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} Called after state is written and onExpandedChange runs. Cannot cancel the completed toggle; not called when disabled.