sdxc

Type to search, or start from one of these:

All guidesAll packages

ToggleButton

A native <button> that reflects an on/off state through its own aria-pressed attribute instead of a separate boolean prop.

Drawing: Places, Routes
View code
// The click reaches the group after the mixin has flipped the button it started on.
<Group aria-label="Map layers" mix={[on<HTMLDivElement, "click">("click", readPressed)]}>
	{layers.map((layer) => (
		<ToggleButton
			key={layer.id}
			aria-pressed={pressed.has(layer.label) ? "true" : "false"}
			aria-label={layer.label}
			variant="outline"
			mix={[pressToggle()]}
		>
			<MapPinIcon />
		</ToggleButton>
	))}
</Group>
<Text>Drawing: {[...pressed].join(", ")}</Text>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui
import "@sdxc/ui/theme.css";

Usage

import { ToggleButton } from "@sdxc/ui";

Renders a native <button aria-pressed> host clicking which submits its enclosing form by default, flipping the state through a server round-trip with no script required; pair pressToggle() through mix in a hydrated island to skip the round-trip.

Examples

<ToggleButton aria-pressed={isBold} variant="ghost" size="sm" aria-label={t("editor.bold")}>
	<BoldIcon />
</ToggleButton>
<ToggleButton aria-pressed={filter === "active"} color="brand" name="filter" value="active">
	{t("tasks.filterActive")}
</ToggleButton>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

PropTypeDescription
"aria-pressed"NonNullable<TagProps<"button">["aria-pressed"]>The button's pressed state, reflected directly onto the host's own aria-pressed attribute.
color?"brand" | "neutral" | "success" | "warning" | "danger"Semantic color role. Defaults to DEFAULT_COLOR.
variant?"solid" | "outline" | "ghost"Visual weight. Defaults to DEFAULT_VARIANT.
size?"sm" | "md" | "lg"Size variant. Defaults to DEFAULT_SIZE.

Also accepts everything in Omit<TagProps<"button">, "aria-pressed">.

Types

NameValuesWhat it decides
Color"brand" | "neutral" | "success" | "warning" | "danger"Semantic color role, each mapped to its matching --ui-* variables.
Variant"solid" | "outline" | "ghost"Visual weight: a solid fill with an on-solid foreground, a transparent fill with a strong colored border, or a fully transparent fill with just a colored label.
Size"sm" | "md" | "lg"Size variant controlling the button's padding and font size.

Other components this module publishes.

  • ToggleButtonGroup