CalmState

The "nothing is wrong" state (Figma "Calm State" 2025:2719): a calm title, why silence is good, and when the AI last checked.

Stacked and Inline lead a screen; Compact sits inside a card or list. It is a polite status.

<CalmState title="Tudo tranquilo" body="Nenhum aviso nos últimos 7 dias." meta="A IA checou hoje às 14:10" />

Playground

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

Calm State

Tudo tranquilo

Nenhum aviso nos últimos 7 dias. Silêncio aqui é bom sinal: a IA continua checando.

A IA checou hoje às 14:10

title

string

body

string

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

Calm State
Tudo tranquilo Nenhum aviso nos últimos 7 dias. Silêncio aqui é bom sinal: a IA continua checando. A IA checou hoje às 14:10

Calm State
Tudo tranquilo Nenhum aviso nos últimos 7 dias. Silêncio aqui é bom sinal: a IA continua checando. A IA checou hoje às 14:10

Calm State
Tudo tranquilo Nenhum aviso nos últimos 7 dias. Silêncio aqui é bom sinal: a IA continua checando. A IA checou hoje às 14:10

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

Prop	Tipo	Padrão	Descrição
layout?	"compact" \| "inline" \| "stacked" \| null	"stacked"
title	ReactNode	—	"Tudo tranquilo".
body?	ReactNode	—	The sentence that says why quiet is good.
meta?	ReactNode	—	When the last check ran (Figma `showMeta`).
art?	ReactNode	—	Replaces the lilac tile (Stacked, Inline) with an illustration. Compact always uses its small disc, so the screen keeps one illustration.
className?	string	—