StatusToggle
A switch component paired with an activation/deactivation confirmation modal. Prevents accidental status changes by requiring an explicit confirmation step.
📖 StorybookPreview
Live preview↗ Open in Storybook
Import
import { StatusToggle } from "@xocialive/ui-components";
Basic usage
<StatusToggle checked={user.isActive} onConfirm={(newValue) => updateUserStatus(user.id, newValue)} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Current toggle state |
onConfirm | (value: boolean) => void | — | Callback fired after the user confirms the modal |
disabled | boolean | false | Disables the toggle |
textOverrides | { activateTitle?: string; deactivateTitle?: string; confirmLabel?: string; cancelLabel?: string } | — | Custom modal copy |
sx | SxProps<Theme> | — | Root element style overrides |