Skip to content
6amDesign
v0.7.0 · PilotUse with AI
6am/Design system/Components
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 criterion
    Core controls share a reusable implementation.

    Buttons, links, action cards, fields and icons are available in the catalog.

    View supporting material
  • Needs work
    Navigation and interaction states are covered by shared components.

    Inventory legacy patterns and add missing navigation, dialogs and loading states.

  • Awaiting review
    Components 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

Interactive

Interactive 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