ApiReference

Structured API reference table — renders prop names, types, defaults, and descriptions with source and required badges.

01 Examples

Rendering a generated prop table

A page's API section

What the section looks like on every component page: the generated props, inside a Section with a secondary intent so reference content reads differently from guide content. types= and the TypesReference below it are one feature — the prop is what turns a type name in the Type column into a link, and the section is what the link points at.

3 props 1 required

Prop	Type	Default	Description
`label` required	`string`	—	Accessible name. Required — an icon-only button has nothing else to announce.
`onclick`	`(event: MouseEvent) => void`	—	Called when the button is activated by pointer or keyboard.
`variant` variant	`'filled' \| 'outlined' \| 'ghost'`	`'filled'`	Visual weight of the button.

<script lang="ts">
  import { ApiReference, Section, TypesReference } from '@urbicon-ui/docs';
  import { componentData } from './api';
</script>

<Section marker id="api" title="API Reference" intent="secondary">
  <ApiReference props={componentData?.props ?? []} types={componentData?.types ?? []} />
</Section>

<TypesReference types={componentData?.types ?? []} />

Notes the generator cannot know

The usageNotes snippet renders above the table — for editorial guidance that belongs to the API as a whole rather than to any single prop.

<ApiReference props={componentData.props} slotClasses={{ stats: 'hidden' }}>
  {#snippet usageNotes()}
    <p>Sizes below <code>md</code> are reserved for dense toolbars.</p>
  {/snippet}
</ApiReference>

02 Accessibility

It is a table, and it says so

The props render through @urbicon-ui/table, so the browser exposes real rows and columns: a screen reader announces "row 4 of 26, column Type" instead of reading a wall of divs. Sorting a column updates aria-sort on its header.

Badges are not the only signal

Required props and their source are marked with a badge and with text in the badge, never with colour alone — the required marker reads "required", not a red dot.

Type cross-links

A type that resolves to a local definition renders as a link into the Types section on the same page. It is an ordinary in-page anchor, so it works with the keyboard and appears in the link list a screen reader can bring up.

03 API Reference

8 props 1 required

Prop	Type	Default	Description
`props` required	`ApiProp[]`	—	Array of prop definitions to display.
`class`	`string`	—	Extra classes merged onto the root element.
`slotClasses`	`Partial<Record<ApiReferenceSlots, string>>`	—	Per-slot class overrides for the wrapper elements.
`types`	`Array<{ name: string }>`	—	Type entries rendered by a `TypesReference` on the same page — pass the same array you pass to `<TypesReference types={…} />`. Type names in the Type column that exactly match an entry become in-page links to it. Omit this (the default) and the column stays plain text: linking is opt-in precisely because a link is only correct when the target is actually on the page.
`unstyled`	`boolean`	`false`	Remove all default tv styles from the wrapper and cell content.
`usageNotes`	`Snippet`	—	Optional usage notes rendered below the table.
`...ApiReferenceVariantProps` variant	`VariantProps`	—	Styling variants from ApiReferenceVariantProps
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

04 Types

Local type definitions used by this component.

4 types

Only referenced

Name	Kind	Category	Used by	Description
ApiProp	interface	helper	1	Single prop entry in the API reference table.
ApiReferenceProps	interface	props	0	Structured API reference table for component documentation. Renders props via `@urbicon-ui/table` with per-column cell snippets and `Badge` indicators for source/required status.
ApiReferenceVariantProps	type	variant	1	—
ApiReferenceSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

05 Installation

Import

import { ApiReference } from '@urbicon-ui/docs';

llm.txt