SystemBanner

Thin top strip with a centered badge for environment labels (development, staging, etc.).

Faixa fina no topo do ecrã com um distintivo centrado, útil para indicar ambiente (desenvolvimento, staging, etc.). O componente está em @zexon/ui/components/system-banner, usa position: fixed e pointer-events-none para não bloquear interacções.

Na documentação, como o banner é fixed, o distintivo pode alinhar ao topo da janela (viewport), não só à caixa da pré-visualização.

Importação

import { SystemBanner } from "@zexon/ui/components/system-banner";

Uso

Exemplo

Modo de desenvolvimento

O contentor tracejado só ocupa espaço; o SystemBanner renderiza-se em fixed por cima do layout. Ajusta text, color (classe Tailwind ou #hex), size (xs · sm · md · lg) e show.

Props

Prop	Tipo	Predefinição	Notas
`text`	`string`	`"Modo de desenvolvimento"`	Texto do distintivo
`color`	`string`	`"bg-orange-500"`	Classe Tailwind de fundo ou cor `#hex`
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"xs"`	Escala tipográfica e padding do distintivo
`show`	`boolean`	`true`	Se `false`, não renderiza
`className`	`string`	—	Classes extra no contentor `fixed`

StatusDot

Switch