Item
Componente customizado para linhas de lista com ícone, label, descrição e trailing opcional.
Interativo
Use interactive para items clicáveis com hover e foco visível.
Item interativo
<Item
icon={<UserIcon />}
label="Perfil"
description="Ver suas informações"
trailing={<ChevronRightIcon className="size-3.5" />}
interactive
onClick={() => router.push("/perfil")}
/>Padrão de implementação
Snippets para os usos mais comuns do Item.
Lista de usuários
import { Item } from "@/components/item"
<div className="ds-card !p-[30px] flex flex-col divide-y divide-border">
{users.map((user) => (
<Item
key={user.id}
icon={<Avatar size="sm"><AvatarFallback>{user.initials}</AvatarFallback></Avatar>}
label={user.name}
description={user.email}
trailing={<Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role}</Badge>}
/>
))}
</div>Menu de navegação
<nav className="flex flex-col">
{navItems.map((navItem) => (
<Item
key={navItem.href}
icon={navItem.icon}
label={navItem.label}
trailing={<ChevronRightIcon className="size-3.5" />}
interactive
onClick={() => router.push(navItem.href)}
/>
))}
</nav>Props e uso
API do componente Item customizado.
Props
icon
ReactNode
Ícone ou avatar exibido à esquerda.
label
string
Texto principal do item (truncado se longo).
description
string
Texto secundário abaixo do label.
trailing
ReactNode
Elemento à direita (badge, ícone, ação).
interactive
boolean
Adiciona hover, foco e cursor-pointer.
children
ReactNode
Conteúdo customizado no bloco central.
Acessibilidade
Com interactive, o Item recebe role="button" e tabIndex=0 automaticamente.
Para listas, envolva os Items em ul + li ou use role="list" no container para semântica correta.
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter