/
/
Review 13| Prop | Type | Default | From |
|---|---|---|---|
| label | string | "Use the new regime" | Label · text |
| description | string | — | Description · text |
| checked | boolean | false | Checked · variant |
| state | "empty" | "loading" | "data" | "error" | "data" | State |
| onChange | (checked: boolean) => void | — | Root · On click · Emit |
| onRetry | () => void | — | Description · On click · Emit |
export interface SwitchProps {
label: string;
description?: string;
checked?: boolean;
state?: "empty" | "loading" | "data" | "error";
onChange?: (checked: boolean) => void;
onRetry?: () => void;
}
export function Switch({ label, description, checked = false, state = "data", onChange, onRetry }: SwitchProps) {
const busy = state === "loading";
return (
<label className={styles.root}>
<button role="switch" aria-checked={checked} disabled={busy}
className={styles.track} data-on={checked}
onClick={() => onChange?.(!checked)} />
<span className={styles.label}>{label}</span>
{state === "error"
? <button className={styles.error} onClick={onRetry}>Couldn’t save. Try again.</button>
: description && <span className={styles.description}>{description}</span>}
</label>
);
}