02 Layout.md

02 – Layout Configuration

Controls arrangement and alignment of icon, name, label, and state within the button.

---

layout

Defines the structural arrangement of major UI elements.

Accepted Values:

• icon_name
• icon_state
• name_state
• vertical
• horizontal
• icon_only
• name_only

YAML Example:

layout: icon_name

---

Layout Behaviors

icon_name

Icon on top or left, name below or right.

icon_state

Icon paired with entity state text.

name_state

Name becomes dominant; state displayed beneath.

vertical

All elements stacked top-to-bottom.

horizontal

All elements arranged left-to-right.

icon_only

Icon centered; name and state hidden automatically.

name_only

Name displayed alone; icon hidden.

---

alignment

Controls horizontal alignment of all grid elements.

Accepted Values:

• left
• center
• right

YAML Output:

styles:
  grid:
    - justify-items: center

Button Builder converts alignment selection to valid CSS grid alignment rules.

---

Grid Structure (Generated Internally)

Button Builder produces its own grid-template-areas depending on layout:

Example (icon_name layout):

styles:
  grid:
    - grid-template-areas: '"i" "n" "s"'

Where:

• i = icon
• n = name
• s = state or label

Templates adjust automatically when the user enables/disables elements.

---

Notes

• Alignment affects name, state, icon, and label simultaneously.
• Some layouts hide non-applicable elements automatically.
• State and label positioning depend on both layout and theme settings.