# Components

> Components, instances, variants, overrides and component properties in Envy. Build a button once and keep every copy on every screen in step.

Source: https://envyui.com/docs/components

A **component** is a board whose layers define a reusable piece: a button, a menu item, an item slot. An **instance** is a copy of it on a screen. Edit the component and every instance follows.

## Create one

Select a layer and press **Ctrl Alt K**. The layer becomes a component board, and the original spot holds an instance of it.

## Variants

Components that belong to the same **set** and differ in variant values are **variants**: Primary, Secondary, Ghost and Danger buttons, in Default, Focus, Pressed and Disabled, at three sizes. The Last Hunt's Button set has 48 variants. Switch an instance between them from the inspector.

## Properties

Properties let an instance change what it's meant to change, in one field:

| Type | What it does |
|---|---|
| Text | Replaces `{prop.Label}` in the component's text layers |
| Toggle | Shows or hides target layers (a badge, a meta line, a glyph) |
| Instance swap | Swaps a nested instance for another component (a different glyph or icon) |

The Last Hunt's menu item has `Label`, `Meta` and `Show meta`. Its main menu sets them per item: Continue shows "Chapter III", New hunt hides its meta line.

## Overrides

Anything else can be overridden per instance: a layer's text, fill, visibility, image, states, click actions or bindings. Overrides are stored on the instance by the path of the layer inside the component, and survive changes to the component. **Reset** clears them; **Detach** (Ctrl Alt B) turns the instance into plain layers.

## Button states

Buttons have **hover**, **pressed** and **disabled** states, each a small patch: fill, border color, text color, opacity and scale. Keyboard and gamepad focus use the hover look, plus an optional focus ring. Preview each state on the canvas before any code exists.

## In the runtimes

Both runtimes expand instances before drawing, with the same algorithm (`resolve.ts` on the web, `envy_resolve.gd` in Godot). Layers inside an instance get ids like `instanceId/sourceId`, which animations can target.