# Prop Button

## Essence

Locked value-button subcomponent of `Prop Switcher`.

`Prop Button` represents one selectable value for a documented component property inside `Prop Switcher`.

## Hook

Use when `Prop Switcher` needs to show one possible value for a component property.

## Internal Rules

- Used only inside `Prop Switcher`.
- Represents a property value, not a general command.
- Shows active state for the currently selected property value.
- Supports normal, hover, focus, focus-visible, pressed, disabled, and active states.
- Uses the same visual language as `ComponentPreview` property controls.
- Disabled state means the value exists but is not available in the current context.
- Must stay compact and scannable.

## Use When

- `Prop Switcher` needs one selectable value.
- A component property has a finite list of values.
- A preview state needs to be controlled without changing production component data.

## Do Not Use When

- A general action button is needed.
- The control is not inside `Prop Switcher`.
- The option changes persisted product state.
- The option is free-form input rather than a finite value.

## Edge Cases

- If a property has many values, consider whether the property should become a different control pattern.
- If a value is unavailable, use disabled rather than hiding it when the unavailable option is useful context.
- If a value label becomes long, revisit the property model or naming.

## Accessibility Notes

- Prop Button is keyboard reachable.
- Active state must be visually distinct.
- Disabled state must not appear selectable.
- Focus and focus-visible states use Design System focus behavior.

## Related Components And Patterns

- `Prop Switcher`: the only owner of Prop Button usage.
- `ComponentPreview`: implementation layer that manages preview property state.
- `Component Page Template`: contains Prop Switcher through Preview.

## Code Paths

- `apps/portfolio-site/src/pages/design-system/index.astro`
- `packages/design-system/src/components/ComponentPreview.astro`