ScopeBadge
A badge after a settings page's title that says what its settings apply to.
import { ScopeBadge } from "@butteryui/react";Demo
When to use it
Use it for
- A settings page whose changes reach further than the person, such as every shop or the whole team
- After a PageHeader's title, through its badge prop
Not for
- A status: use StatusBadge
- A count or a value: use ValueBadge or PageHeader's value
- Explaining a figure rather than a scope: use InfoButton
Examples
Personal setting
A setting that's only yours, its badge controlled so the page can say when its details are open.
Email digest
Details closed
Pickup hours page
A settings page's header with the badge after its title, through PageHeader's badge, over a setting it governs.
Pickup hours
When cafés and customers can collect their orders.
Every shop is closed for pickup on Sundays
Settings for every shop
A settings title that says its changes reach every shop, with the details a press away.
Pickup hours
Variants and states
After a title
Hover or focus it for the details; press it to keep them open.
Pickup
Props
ScopeBadge
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What the setting applies to, such as "All shops". It's the badge's text and its name. | |
inforequired | string | What that means, in a sentence: in a tooltip on hover and keyboard focus, and in a popover on a press. | |
open | boolean | Whether the popover is open. Pair with onOpenChange to control it. | |
defaultOpen | boolean | false | Whether the popover starts open when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | Called when the popover opens or closes. |
It also takes Omit<ComponentPropsWithRef<"button">, "children">.
Accessibility
A native button named by its label and described by its info while its tooltip is open (on hover or keyboard focus). A press, a tap, Enter or Space opens the info in a popover named by the label, focus staying on the badge and the tooltip shut; Escape, Tab or a press elsewhere closes it. Its target reaches 24px.
| Keys | What they do |
|---|---|
| Enter or Space | Opens or closes the popover with its info, keeping focus on the badge |
| Escape | Closes the popover |
| Tab | Closes the popover and moves on |
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: Its popover fades in and out over 100ms without growing.
Layout
A badge 20px tall (--bt-h-badge, 18 in compact density), as wide as its label and 12px info icon with 6px of padding a side and never wider than its container, where a long label truncates with an ellipsis and shows in full as its title. Its target reaches 24px both ways. Its popover is at most 320px wide (--bt-w-aside), padded 12px, and its words wrap.