shadcn.io is not affiliated with official shadcn/ui
Toggle Setting Alert Banner Block for Solid
A setting callout for an uptime monitor: a card in card with a bell icon, a heading and a sentence, and an Off or On label beside a switch that rewrites the sentence and lights a status dot.
Installation
Overview
A setting callout for Solid with Ark UI, for an option that is better offered where people are looking than buried in a settings page. A muted shell with + marks on its corners holds a raised panel in one row: a bell icon, a heading and a sentence at the start, and at the end an "Off" or "On" label with a status dot beside a switch. Turning it on rewrites the sentence from an invitation ("Turn this on to get an email…") to a promise ("You'll get an email…"), lights the dot, and says so in a polite live line. Both sentences share one grid cell, so the block never changes height. The info token is on the icon and one hairline along the panel's top edge; the switch is a foreground tone, so the primary stays on your page's one action. It's built from Guides, Switch and Status, with your theme's tokens for every colour. For notification opt-ins, beta features and any setting with an immediate effect.
FAQ
How is the change announced?
A visually hidden polite line is in the page from the start, empty, and gets its text ("Email alerts are on.") when the switch changes, so the change is announced once and nothing is read at load. The switch itself is named "Email alerts for failed checks", and its state is the switch's own.
How do I save the setting?
The switch is controlled by the block's enabled state: call your API in the change handler and keep the switch's value in step with the answer. While the request runs you can disable the switch, and on failure set it back and put the reason in the live line. The block itself stores nothing, so the preview always starts off.
Why do both sentences share a cell?
A sentence that changes length changes the height of the block, and the page below jumps. With both in one grid cell the longer one sets the height and the other is invisible, so switching moves nothing. Screen readers hear only the visible one.
Why is there no dismiss button?
It's a setting, not news: the switch is the answer, and it stays so the setting can be changed back. If you want the callout gone once it's on, fold it the way the other alerts do and move focus to a status line.
Is the Off and On label part of the switch's name?
No. The label and its dot are decoration for sighted people and are hidden from assistive technology, because the switch already says on or off. The dot is a status colour only when on, and the word says the same thing, so the state doesn't rely on colour.
How does it fit on a phone?
The icon, heading and switch share the first row, with the switch at the end; the sentence takes the panel's full width under them. From md it is one row with the sentence beside the switch. At 320 pixels nothing scrolls sideways, and in a right-to-left layout everything mirrors.