State Persistence
Preserve a value across reloads using browser storage.
Preview
Import
import { StatePersistence } from "@sigil-ui/components";Usage
<StatePersistence
activeItem={{ label: "Active workspace", sublabel: "restored", value: "Free", valueLabel: "while idle", variant: "success" }}
competitors={[{ label: "Ephemeral runner", value: "$0.09/hr", variant: "danger" }]}
persistedState={[{ label: "Installed packages", status: "Ready" }, { label: "Working tree", status: "Saved" }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
activeItem | PersistenceActiveItem | — | The primary "active" item (e.g. the product being promoted). |
competitors | PersistenceActiveItem[] | — | Competing items shown for comparison. |
persistedState | PersistedStateRow[] | — | Rows of persisted state. |
activeLabel | string | — | Section labels. |
stateLabel | string | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Success |
--s-error | Error |
--s-border | Border |
--s-text-muted | Text muted |
--s-duration-normal | Duration normal |
--s-ease-spring | Ease spring |
--s-radius-full | Radius full |
--s-duration-slow | Duration slow |
--s-text | Text |
--s-background | Background |
--s-ease-out | Ease out |
--s-duration-fast | Duration fast |