Inputs & navigation

Buttons, form controls, the breadcrumb, and navigation chips and links, drawn like the website's controls: square-ish, a 1.5px border, semibold labels.

Button

The website's buttons: 4px corners, a 1.5px border, a semibold label. primary is filled with ink (black in light mode, white in dark mode; dark is the same look), secondary sits on the surface framed by the rule, outline is the same frame on a transparent fill, and white is for dark sections (it turns mint on hover). Renders as a router link with href, as an external link with externalHref. For a copy or confirm action use the mint chip (bg-mint text-black border-[1.5px] border-black), as the code blocks and Copy as Markdown do.

Variants

Sizes

sm is 32px tall, md 40px, lg 48px.

With link

Usage

<docs-button variant="primary" href="/sdk">Get Started</docs-button>
<docs-button variant="secondary" size="sm">Cancel</docs-button>

Breadcrumb

"Section / group / page" above every docs page, next to the Copy as Markdown actions. It replaces the old label above the title: the page says where it sits instead. The docs layout renders it once from the URL (resolveBreadcrumb() in src/app/services/breadcrumb.ts: the section label, the side navigation group, the page label); the section links to its index, the current page is in primary ink. Pages set nothing. A new top-level section needs an entry in SECTION_LABELS.

Example (this page)

Usage

<!-- Rendered once by the docs layout, (docs).page.ts -->
<docs-breadcrumb />

Next steps

The "Next steps" footer at the bottom of guide pages: rule-topped columns (a 2px rule, a semibold title with an arrow that nudges right on hover, a gray description), like the website's feature rows. Pass an array of { label, path, desc } links.

Usage

import { DocsNextStepsComponent, NextStepLink } from '../components/ui';

links: NextStepLink[] = [
  { label: 'Installation', path: '/cli/installation', desc: 'Install the CLI' },
];

// template
// <docs-next-steps [links]="links" />

TOC list

Table-of-contents navigation rendered from a TocItem[] tree: square legend markers, the active item semibold with a mint marker framed by the rule. Supports one level of nested children and emits itemClick on selection. Inputs: items (TocItem[]), activeId, basePath, title. Output: itemClick.

Example

Usage

import { TocItem } from '../components/ui';

items: TocItem[] = [
  { id: 'overview', text: 'Overview', children: [
    { id: 'goals', text: 'Goals' },
  ] },
  { id: 'usage', text: 'Usage' },
];
activeId = 'overview';

// template
<docs-toc-list
  [items]="items"
  [activeId]="activeId"
  title="On this page"
  (itemClick)="activeId = $event"
/>

Chip nav

A wrapping row of pill links — the "jump to a task" / index-of-recipes pattern: a hairline outline that turns into the rule on hover. Replaces the hand-rolled rounded-full border… anchors that were duplicated across guide pages. Inputs: items (DocsChipNavItem[] of { label, path, external? }) and an optional label, rendered as an uppercase group label before the chips. Each path resolves by shape: a same-page fragment (#install) renders as a plain anchor jump, an internal route (/cli/commands) as a routerLink, and an absolute URL with external: true opens in a new tab.

Example

Usage

<docs-chip-nav [items]="jumpTasks" label="Jump to a task" />

// jumpTasks: DocsChipNavItem[] = [
//   { label: 'Scaffold', path: '/cli/scaffolding' },
//   { label: 'Docs', path: 'https://example.com', external: true },
// ];

Toggle group

A small segmented control: a single-select row of pills like the code-tab pills, a hairline outline and an ink fill for the selected option. Replaces hand-rolled inline-flex rounded-lg border… p-1 toggles. Two-way bind the selected id with [(value)]. Input: options (DocsToggleOption[] of { id, label }).

Example

Usage

<docs-toggle-group [options]="modes" [(value)]="mode" />

// modes: DocsToggleOption[] = [
//   { id: 'additive', label: 'Additive (default)' },
//   { id: 'strict', label: 'Strict mirror' },
// ];
// mode = signal('additive');

Checkbox

A styled checkbox + label row wrapping a native <input type="checkbox">, so it stays fully accessible: a square box with a 1.5px rule outline that, when checked, fills mint with a black border and check. Two-way bind with [(checked)], or use [checked] + (checkedChange) when the state lives in a signal/array elsewhere. Label comes from the label input or projected content. Input: disabled.

Example

Usage

<docs-checkbox [(checked)]="enabled" label="Indexed queries" />

<!-- Or drive it from a signal/array externally: -->
<docs-checkbox
  [checked]="selected().includes(cat)"
  (checkedChange)="toggle(cat, $event)"
  [label]="cat"
/>

Select

A styled native <select> — keeps the native control and its built-in accessibility, drawn like the outline controls: 4px corners, framed by the 1.5px rule. The optional label renders as an uppercase group label above it. Two-way bind with [(value)]. Inputs: options (DocsSelectOption[] of { value, label }), label, and disabled.

Example

Usage

<docs-select [options]="sortOptions" [(value)]="sortBy" label="Sort by" />

// sortOptions: DocsSelectOption[] = [
//   { value: 'relevance', label: 'Relevance' },
//   { value: 'name', label: 'Name (A–Z)' },
// ];
// sortBy = signal('relevance');