Environment badge
Marks a sandbox Agency on every screen, so nobody mistakes practice data for real candidates. It sits in the sidebar under the Agency name.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { EnvironmentBadge } from '@/ui/environment-badge';<EnvironmentBadge />In the sidebar
Under the Agency name, on every screen of a sandbox Agency. For most members it is a plain label.
import { EnvironmentBadge } from '@/ui/environment-badge';
// Under the Agency name in the open sidebar.
export default function EnvironmentBadgeSidebar() {
return (
<div className="flex w-60 flex-col gap-075 rounded-xlarge bg-surface-sunken p-100 inset-ring inset-ring-border">
<div className="flex h-8 items-center gap-100 px-075">
<span aria-hidden className="flex size-5 items-center justify-center rounded-small bg-brand-bold text-body-small leading-body-small font-semibold text-surface">
A
</span>
<span className="text-body leading-body font-semibold text-text">Northbridge Sandbox</span>
</div>
<EnvironmentBadge className="px-100" />
</div>
);
}Owner or Admin
With href, the badge links to sandbox settings. Hover underlines the word; focus draws the 2px ring with a 2px gap.
import { EnvironmentBadge } from '@/ui/environment-badge';
// Owners and Admins reach sandbox settings from it.
export default function EnvironmentBadgeLink() {
return <EnvironmentBadge href="#sandbox-settings" />;
}Folded rail
collapsed turns the badge into an 8px warning dot with "Sandbox" in a tooltip. The row keeps its height, so nothing below moves.
import { EnvironmentBadge } from '@/ui/environment-badge';
// The folded rail: an 8px dot with the word in a tooltip, in a row of the same height.
export default function EnvironmentBadgeRail() {
return (
<div className="flex w-12 flex-col items-center gap-075 rounded-xlarge bg-surface-sunken py-100 inset-ring inset-ring-border">
<span aria-hidden className="flex size-8 items-center justify-center">
<span className="flex size-5 items-center justify-center rounded-small bg-brand-bold text-body-small leading-body-small font-semibold text-surface">A</span>
</span>
<EnvironmentBadge collapsed href="#sandbox-settings" />
</div>
);
}Empty state
What a list or page shows when there is nothing in it: why it is empty and the one next step. First run, no match, not connected yet, or failed to load.
Error boundary
What shows when a page can't: a crash, a missing page, no access, offline, signed out or the database out of reach. The failure stays inside the smallest part that broke, keeps a way out, and is reported on its own.