StyleButton

Switch between SnowUI and Apple visual styles.

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 StyleButton to switch between supported visual styles. Use ColorSchemeButton for light and dark mode. It does not imply that a single Button can change arbitrary private component styles.

Synchronize the style with bind:mode; defaultMode supplies the initial mode.
It applies the mode to the document by default. Use applyToDocument=false for local control. Without children it uses icon-only layout.

Import

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

Usage

Variants

API Reference

Property	Type	Default	Example	Description
`mode`	`SnowUIStyleMode`	`—`	`mode={value}`	Current visual style; supports bind:mode. Takes priority over defaultMode on mount. A click updates it, and it follows root-attribute changes while document synchronization is active.
`defaultMode`	`SnowUIStyleMode`	`—`	`defaultMode={value}`	Initial uncontrolled mode on mount; mode takes priority. If neither is set, reads the page root. With applyToDocument=false, falls back to snowui.
`applyToDocument`	`boolean`	`true`	`applyToDocument`	Synchronize current state to document.documentElement with mode="ios", removing mode for SnowUI. false disables reading, writing, and observing the page attribute; the caller owns the style target. Does not write storage.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Override the accessible Button name. By default, describes the state that clicking will switch to and follows LocaleProvider.
`snowuiLogo`	`Snippet`	`— (built-in graphic)`	`snowuiLogo={snowuiLogoContent}`	Replace the SnowUI Logo shown while the current mode is snowui. Changes graphics only, not switching logic.
`appleLogo`	`Snippet`	`— (built-in graphic)`	`appleLogo={appleLogoContent}`	Replace the Apple Logo shown while the current mode is apple. Changes graphics only, not switching logic.
`children`	`Snippet`	`—`	`<StyleButton>Content</StyleButton>`	Custom content after the state icon. Without it, the host Button uses iconOnly layout automatically.
`disabled`	`boolean`	`false`	`disabled`	Disable the Button action without preventing synchronization of an external binding or page attribute.
`onModeChange`	`(mode: SnowUIStyleMode) => void`	`—`	`onModeChange={(value) => { /* handle value */ }}`	Receive the new value after a user click. Initialization, external assignments, and observed page-attribute changes do not call it.
`onclick`	`(event: MouseEvent) => void`	`—`	`onclick={(value) => { /* handle value */ }}`	Called before the state switches on a valid click. In the current implementation, preventDefault() does not cancel the subsequent switch. Not called when disabled.