ExpandButton handbook

v1.0.2 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Switch between expanded and collapsed states with consistent button feedback, suitable for collapsible content and detail entry points.

When to use it

Use to expand or restore content. If a host such as CodeBlock already provides this action, configure the host to avoid two competing expansion states.

Receive state through bind:expanded or onExpandedChange; defaultExpanded supplies the initial value.
The component provides only the expand action. It does not create or control a content panel; connect its state to the actual content in the page.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { ExpandButton } from '@snowui-design-system/components';</script> <ExpandButton />

API

Keyword	Type	Default	Description
expanded	`boolean`	—	Current expanded state; supports bind:expanded. Uses defaultExpanded when undefined. Clicking writes the next boolean value; the caller shows or hides the content region.
defaultExpanded	`boolean`	`false`	Fallback state when expanded is undefined. After the first click, the component-written expanded value takes over.
ariaLabel	`string`	`LocaleProvider`	Accessible name for the button when collapsed; describe the action it will perform. By default, LocaleProvider supplies “Expand” for English and the corresponding localized label for Chinese.
collapseAriaLabel	`string`	`LocaleProvider`	Accessible name for the button when expanded; describe the collapse action. By default, LocaleProvider supplies “Collapse” for English and the corresponding localized label for Chinese.
icon	`Snippet`	`—（arrows-out-simple）`	Custom icon in the collapsed state. Only the graphic changes; the component still manages expanded state and aria-expanded.
collapseIcon	`Snippet`	`—（arrows-in-simple）`	Custom icon in the expanded state; replaces content using the component's existing transition.
children	`Snippet`	—	Custom content after the icon. Without it, Button.iconOnly is enabled. The component does not create or control an expanded panel.
onExpandedChange	`(expanded: boolean) => void`	—	Receives the new state after a click, before onclick. External assignments do not call this callback.
onclick	`(event: MouseEvent) => void`	—	Called after the state write and onExpandedChange. It cannot cancel a completed toggle; it is not called when disabled.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Usage

<script lang="ts">  import { ExpandButton } from "@snowui-design-system/components";  let expanded = $state(false);</script> <ExpandButton bind:expanded bare />

expanded / defaultExpanded: controlled value and default value.
onExpandedChange: callback for value changes.
icon / collapseIcon: replace the default expand and collapse icons.
ariaLabel / collapseAriaLabel: accessible labels for the two states.
Default icons are arrows-out-simple / arrows-in-simple. Content replacement uses the lightweight state button's 150ms replacement-appear transition.

API

See Button for other compatible visual, link, and event options. ExpandButton owns children, onclick, and aria-expanded; inherited disabled prevents user toggles.

This section is protected. An AI must request user review before modifying it.

ExpandButton style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable	Purpose and default reference
`--snowui-expand-button-motion-duration-override`	default: 150ms; Button hover / click

Design guide · Tokens · Composition boundaries

ExpandButton types and state

Required Props: no named required Props.

Bindable Prop: bind:expanded.

Inheritance: Omit<ButtonProps, "children" | "onclick" | "aria-expanded">. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.

ButtonProps

Source: components/src/components/ExpandButton.svelte

type ButtonProps = ComponentProps<typeof Button>;