Attention

Playground

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

Backoffice / Attention Item

severity

dsState

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

Default	Hover	Focus
Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiCríticohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiCríticohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiCríticohá 2 h

Default	Hover	Focus
Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiAtençãohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiAtençãohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiAtençãohá 2 h

Default	Hover	Focus
Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiInfohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiInfohá 2 h	Renovação de 29 out vai falharSaldo IPRoyal US$ 2,17 · faltam US$ 3,03 · 1 sessão caiInfohá 2 h

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

AttentionItemProps

Prop	Tipo	Padrão	Descrição
severity	"attention" \| "critical" \| "info"	—	Figma "Severity"; the icon is fixed per severity.
severityLabel	string	—	The severity in words ("Crítico"), read with the icon; shown as the Status when `status` is set. Never colour or icon alone.
title	ReactNode	—	"Renovação de 29 out vai falhar"; two lines at most.
meta?	ReactNode	—	One line of detail, truncated.
since?	ReactNode	—	"há 2 h".
status?	ReactNode	—	Figma "showStatus": a Status on the right.
render?	ReactElement<unknown, string \| React.JSXElementConstructor<any>>	—	Where it gets solved, e.g. `render={<NextLink href="/infrastructure/purchases" />}`.
className?	string	—

AttentionListProps

Prop	Tipo	Padrão	Descrição
title	ReactNode	—	"Precisa de você".
count?	number	—	How many items wait (a warm count next to the title).
action?	ReactNode	—	"Ver todos" (a ghost Button or Link), right of the title.
className?	string	—
children	ReactNode	—	Figma SLOT "items": AttentionItems, worst first.