# ComponentEntry

A reusable UI element, like a button or a dialog.

Source: `entries/component.schema.yaml`

**3 definitions** in this file: `ComponentEntry`, `traitType`, `traitValue`

## ComponentEntry {#componententry}

A reusable UI element, like a button or a dialog.

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `kind` | `"component"` | ✓ | Marks this entry as a component. |
| `id` | string | ✓ | This entry's unique id in the design system graph. |
| `name` | string | ✓ | The human-readable display name. |
| `description` | string | ✓ | A one-line statement of what this entry is or is for. |
| `purpose` | string |  | Explains the entry's reason for existing. |
| `metadata` | object |  |  |
| `sections` | [dispatch](schema.md#sections-section-dispatch)[] |  | Every documentation section for this entry. (Min items: 1) |
| `extends` | [list](schema.md#common-ref-list) |  | Pointers from this entry to another it inherits from (rel: extends). |
| `related` | [list](schema.md#common-ref-list) |  | Pointers from this entry to another it resembles in usage or purpose. |
| `refs` | [list](schema.md#common-ref-list) |  | Pointers from this entry to entries and outside resources not covered by `related` or `extends`. |
| `$extensions` | [Extensions](schema.md#common-extensions) |  | Escape hatch for tool data, or for an outside id that doesn't fit this schema's own id pattern. Each top-level key MUST be a dotted namespace, like `com.acme`, matching the Design Tokens Community Group's own `$extensions` convention. |
| `sourceFiles` | object {platform, file}[] |  | One entry per platform's source file. (Min items: 1) |
| `imports` | object {platform, code, package}[] |  | One entry per platform. (Min items: 1) |
| `specs` | [list](schema.md#common-ref-list) |  | Machine-readable API contract(s) for this component (props, slots, events, etc.) in a standard, tool-readable format. |
| `traits` | object \| object[] |  | The component's variants and states. Every item says which one it is with `traitType`, and carries a `kind` of `boolean` or `enum` for the form it takes - an enum has its own `values` list, a boolean is a plain toggle. (Min items: 1) |
| `combos` | [Combo](schema.md#common-combo)[] |  | Define which of this component's own boolean traits or enum values can or cannot be paired with each other. (Min items: 1) |

**References:** [Entry](schema.md#entries-entry), [EntryMetadata](schema.md#metadata-entry-metadata), [Id](schema.md#common-id), [Ref](schema.md#common-ref), [list](schema.md#common-ref-list), [traitValue](schema.md#entries-component-traitvalue), [traitType](schema.md#entries-component-traittype), [Combo](schema.md#common-combo), [apiId](schema.md#common-id-apiid), [Markdown](schema.md#common-markdown), [list](schema.md#common-example-list), [Since](schema.md#common-since), [dispatch](schema.md#sections-section-dispatch), [Extensions](schema.md#common-extensions)

## traitType {#traittype}

Whether this trait is a variant the caller configures, or a state the component can be in.

Allowed values:

- `variant`
- `state`

## traitValue {#traitvalue}

The shared properties of a boolean trait or one enum value - what it is, and what it's for.

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `id` | [apiId](schema.md#common-id-apiid) | ✓ | The machine-readable id. Mirrors the real prop, attribute or value name, so it accepts camelCase, PascalCase, snake_case and kebab-case. |
| `description` | [Markdown](schema.md#common-markdown) | ✓ | What this is, how it looks or behaves, and any constraints. |
| `name` | string |  | The human-readable name. Uses `id` when left out. |
| `purpose` | [Markdown](schema.md#common-markdown) |  | Why this exists. |
| `examples` | [list](schema.md#common-example-list) |  | Examples showing this in context. |
| `since` | [Since](schema.md#common-since) |  | The version this was introduced. |

**References:** [apiId](schema.md#common-id-apiid), [Markdown](schema.md#common-markdown), [list](schema.md#common-example-list), [Since](schema.md#common-since)
