Item
Atom
Item representa uma unidade em lista ou menu. Ele precisa deixar claro se é navegação, seleção ou ação.
Use Item para resultados, menus, listas de fontes e opções contextuais. Em superfícies operacionais, o estado ativo/selecionado não pode depender só de cor.
Exemplos copiáveis
React
React
import * as React from "react"
type PulsoItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
title: string
description?: string
selected?: boolean
}
export function PulsoItem({ title, description, selected = false, className, ...props }: PulsoItemProps) {
return (
<button
type="button"
aria-pressed={selected}
data-selected={selected}
className={[
"flex w-full items-start justify-between gap-3 rounded-[var(--radius-md)] border px-3 py-2 text-left transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-easing)]",
selected ? "border-[var(--primary)] bg-[var(--primary-soft)]" : "border-[var(--border)] bg-[var(--card)] hover:bg-[var(--muted)]",
"focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]",
className,
].filter(Boolean).join(" ")}
{...props}
>
<span>
<span className="block text-sm font-semibold text-[var(--fg-strong)]">{title}</span>
{description ? <span className="mt-0.5 block text-xs text-[var(--fg-muted)]">{description}</span> : null}
</span>
</button>
)
}<PulsoItem title="PLS-012" description="Vazamento — APP · risco high" selected />Regras
- Item precisa ter papel claro: navegação, seleção ou ação.
- Estado selecionado usa texto/semântica além de cor.
- Não esconda risco ou consequência em metadado truncado.
- Item destrutivo exige confirmação proporcional.
Last updated on