PropsTable

Props reference table in the code-block surface: name, type, default, and description, with an optional note.

Usage

svelte

<script lang="ts">
  import { PropsTable, type PropsTableRow } from "@milandekruijf/ui/svelte";

  const rows: PropsTableRow[] = [
    {
      name: "variant",
      type: '"outline" | "filled"',
      default: '"outline"',
      description: "Surface style of the badge.",
    },
    {
      name: "children",
      type: "Snippet",
      required: true,
      description: "Badge label.",
    },
  ];
</script>

<PropsTable props={rows} note="Optional rows render with a ? suffix." />

Examples

Custom type rendering

Prop	Type	Default	Description
color?	`"slate" \| "ghost" \| "blue"`	"slate"	Visual style of the button.
size?	`"sm" \| "md"`	"md"	Control height and horizontal padding.
disabled?	`boolean`	—	Disables the button and dims it.
children	`Snippet`	—	Label and optional icon content.

An optional footnote, e.g. inherited props or type shapes.

<script lang="ts">
  import { PropsTable, type PropsTableRow } from "@milandekruijf/ui/svelte";
  import TypeCode from "#lib/components/design/type-code.svelte";

  const rows: PropsTableRow[] = [
    {
      name: "color",
      type: '"slate" | "ghost" | "blue"',
      default: '"slate"',
      description: "Visual style of the button.",
    },
    {
      name: "size",
      type: '"sm" | "md"',
      default: '"md"',
      description: "Control height and horizontal padding.",
    },
    {
      name: "disabled",
      type: "boolean",
      description: "Disables the button and dims it.",
    },
    {
      name: "children",
      type: "Snippet",
      required: true,
      description: "Label and optional icon content.",
    },
  ];
</script>

<PropsTable
  props={rows}
  note="An optional footnote, e.g. inherited props or type shapes."
>
  {#snippet typeSnippet(row: PropsTableRow)}
    <TypeCode code={row.type} />
  {/snippet}
</PropsTable>

Props

Prop	Type	Default	Description
props	`PropsTableRow[]`	—	Rows to render: `{ name, type, default?, required?, description }`.
note?	`string`	—	Optional footnote below the table (e.g. inherited props or type shapes).
typeSnippet?	`Snippet<[PropsTableRow]>`	—	Custom renderer for the type cell (e.g. Shiki tokens); falls back to `InlineCode`.
propLabel?	`string`	"Prop"	Header for the name column; pass a localized string.
typeLabel?	`string`	"Type"	Header for the type column.
defaultLabel?	`string`	"Default"	Header for the default column.
descriptionLabel?	`string`	"Description"	Header for the description column.
emptyLabel?	`string`	"No documented props."	Shown when `props` is empty.
class?	`string`	—	Extra classes merged on the root.