Notice

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Notice

Não deu pra enviar o código. Tente de novo.

type

tone

description

icon

boolean

layout

title

string

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Tone · Layout	Notice
Error · Inline	Não deu pra enviar o código. Tente de novo.
Warm · Inline	A Marlene ainda não aceitou. O link continua valendo por mais 5 dias.
Warm outline · Inline	Confira o número antes de mandar o convite.
Brand · Inline	Você pode trocar isso depois em Configurações.
Info · Inline	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Info · Banner	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Attention · Inline	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Attention · Banner	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Ok · Inline	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Ok · Banner	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Danger · Inline	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.
Danger · Banner	Link enviado pra Lia Ela tem 7 dias pra aceitar. A gente te avisa quando ela disser sim.

Tone · Layout	Notice
Text · Inline	E-mail inválido.
With icon · Inline	Use um e-mail como mariana@exemplo.com.br.

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

NoticeRootProps

Prop	Tipo	Padrão	Descrição
type?	"inline-error" \| "notice" \| null	"notice"
tone?	"attention" \| "brand" \| "danger" \| "error" \| "info" \| "ok" \| "text" \| "warm" \| "warm-outline" \| "with-icon" \| null	—
layout?	"banner" \| "inline" \| null	"inline"
open?	boolean	—	Shown or dismissed (controlled).
defaultOpen?	boolean	true	Initial visibility when uncontrolled; Dismiss hides it by itself.
onOpenChange?	((open: boolean) => void)	—	Called with false when the person dismisses it.
urgent?	boolean	false	It blocks what the person is doing: announced at once (role="alert"). Everything else is a polite status.
className?	string	—

NoticeDismissProps

Prop	Tipo	Padrão	Descrição
label	string	—	What the button does, read aloud ("Fechar aviso").
className?	string	—
onClick?	((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void)	—