Section reviewNeeds work1 met · 1 to improve · 1 to review
What is in place, what needs improving, and what still needs a closer look. Each status refers only to the criterion below; it is not approval of the whole section.
- Meets criterionCore controls share a reusable implementation.
Buttons, links, action cards, fields and icons are available in the catalog.
View supporting material ↗ - Needs workNavigation and interaction states are covered by shared components.
Inventory legacy patterns and add missing navigation, dialogs and loading states.
- Awaiting reviewComponents work with keyboard, zoom and assistive technology.
Complete an accessibility review for each supported variant and record results.
05 / Components
Parts that already work together.
These examples use the catalog’s actual components. The first set includes actions, links, fields and interface icons.
Buttons and actions
InteractiveInteractive demo. The buttons do not send requests.
import { DsButton, DsLink } from "@/components/design-system/Primitives";
<DsButton onClick={handleRequest}>Request a proposal</DsButton>
<DsLink href="/destination" variant="secondary">View details</DsLink>A clear destination for every link
Use a button to perform an action and a link to navigate. If an entire card is clickable, it needs a single destination and a visible indication. Links to different destinations must be separate.
<DsActionCard
href="/destino"
eyebrow="Categoria"
title="Um próximo passo claro"
description="Explique o que a pessoa vai encontrar."
label="Explorar exemplos"
/>Pattern used on the Design System service page: one link per card, a title, an optional description and a visible action. Hover and focus fill the card with lime; do not place buttons or other links inside it.
A shared icon library
Explore 52 drawings, usage rules and reusable SVG files in Build → Icons.
Explore icons