Naming convention and properties consistencies #4621

alexlvrs · 2026-03-05T09:31:58Z

alexlvrs
Mar 5, 2026
Maintainer

Rules for consistent property organisation across all components in the EDS Core Components Figma library.

1. Summary of Rules

1.1 Naming

Rule	Convention	Example
All components must include `[EDS]` suffix	`ComponentName [EDS]` or `_ComponentName [EDS]`	`Button [EDS]`, `_Chip [EDS]`
Inner helpers use `⌘` prefix	`⌘ ComponentName`	`⌘ Button`, `⌘ Input`
All multi-word names use Title Case	Every word capitalised	`Show Focus Frame`, not `Show focus frame`

1.2 Dropdown Properties

Dropdowns are Variant properties in Figma — the user picks one value from a predefined list.

Property	Definition	Values	Example
State	The current interaction state of the component. Every interactive component must expose this.	Base: `Default`, `Hover`, `Disabled`	Checkbox, Radio, Switch, Accordion
		Extended: `Default`, `Hover`, `Focus`, `Active`, `Disabled`	Button (`⌘ Button`), Chip
		Input: `Default`, `Hover`, `Focus`, `Active`, `Filled`, `Read-only`, `Disabled`	Text Field, Search, Select (`⌘ Input`)
Tone	The semantic colour intent of the component. Never use raw colour names.	Action: `Accent`, `Neutral`, `Danger`	`Button [EDS]` — Accent = primary action colour, Neutral = subdued, Danger = destructive
		Feedback: `Info`, `Warning`, `Danger`	`_Banner [EDS]` — Info = blue, Warning = orange, Danger = red
		Full: `Default`, `Neutral`, `Accent`, `Success`, `Warning`, `Danger`, `Info`	`_Chip [EDS]` — all semantic tones available
Variant	The visual hierarchy or functional type of the component.	`Primary`, `Secondary`, `Ghost`	`⌘ Button` — Primary = filled/emphasis, Secondary = outlined, Ghost = text-only
		`Default`, `Checked`, `Deletable`, `Dropdown`, `💠 Custom`	`_Chip [EDS]` — functional chip types
		`Label`, `Status`	`_Badge` — label badge vs status indicator
Style	The visual treatment / container style.	`Default`, `Outlined`	`_Badge` — solid fill vs border-only
		`Default`, `Outlined`, `High Contrast`	`_Chip [EDS]` — High Contrast for accessibility
Emphasis	The visual weight / prominence level.	`Low`, `Medium`, `High`	`_Badge` — Low = subtle, High = attention-grabbing
Validation	The form validation state. Independent of State — a field can be focused AND in error.	`Default`, `Error`	`⌘ Input` — Default = no validation feedback, Error = red border + error message
Tip Position	The direction a tooltip points.	`Bottom`, `Right`, `Left`, `Top`	`_Tooltip [EDS]`

Rules for all Dropdowns:

Default must always be the first value when present.

Disabled must always be the last value in any State dropdown.

Use semantic names for Tone (never Green, Blue, Red — use Success, Info, Danger).

1.3 Boolean Properties

Booleans are on/off toggles in Figma — they show or hide an element, or flip a component between two states.

`Show` prefix — Visibility toggles

Controls whether an optional element is visible.

Property	Definition	Example component
`Show Leading Icon`	Show an icon before the label text.	`⌘ Button` — e.g. a "+" icon before "Add item"
`Show Trailing Icon`	Show an icon after the label text.	`⌘ Button` — e.g. a chevron after "Select"
`Show Focus Frame`	Show the keyboard focus indicator ring around the component.	`⌘ Button`, `Checkbox [EDS]`, `Radio Button [EDS]`, `Switch [EDS]`
`Show Button`	Show an action button inside the component.	`_Snackbar [EDS]` — optional "Undo" button
`Show Label`	Show the text label next to the control.	`Checkbox [EDS]` — hide label for icon-only use
`Show Scroll Bar`	Show the scroll bar in a scrollable container.	`_Menu [EDS]`
`Description`	Show the description text below the label.	`Text Field [EDS]` — help text under the field label
`Helper Message`	Show the helper/validation message below the input.	`⌘ Input` — e.g. "This field is required"
`Optional/Required`	Show the "(Optional)" or "(Required)" suffix on the label.	`Text Field [EDS]` — e.g. "Email (Required)"
`Information Icon`	Show an info icon next to the label for additional context.	`Text Field [EDS]`
`Left Adornment`	Show a decoration (icon, prefix) on the left side of the input.	`⌘ Input` — e.g. a search icon, a "$" prefix
`Right Adornment`	Show a decoration (icon, suffix) on the right side of the input.	`⌘ Input` — e.g. a clear button, a unit suffix
`Focus Frame`	Show the focus indicator on the input field.	`⌘ Input`

`Is` prefix — State toggles

Controls the active/checked state of a component.

Property	Definition	Example component
`Is Checked`	Whether the control is in its selected/on state.	`Checkbox [EDS]` — ticked, `Radio Button [EDS]` — filled, `Switch [EDS]` — on
`Is Indeterminate`	Whether a checkbox shows a mixed/partial state (dash icon). Only applies when some but not all child checkboxes are checked.	`Checkbox [EDS]` — parent checkbox with mixed children

Rules for all Booleans:

Never use negative names. No Label → Show Label (invert the default).

Always use Title Case. Show focus frame → Show Focus Frame.

Show = visibility toggle, Is = state toggle. Don't mix them.

1.4 Text Properties

Text properties are editable string fields — the user types custom content.

Property	Definition	Example component
`Label`	The primary text label for form controls.	`Checkbox [EDS]` — "Accept terms", `⌘ Button` — "Submit"
`Text`	The content text for display elements.	`_Badge` — "New", `_Chip [EDS]` — "Category", `_Tooltip [EDS]` — "More info"
`Placeholder`	Hint text shown inside an empty input field. Disappears when the user types.	`⌘ Input` — "Enter your email"
`↳ Helper Message Text`	The helper or error message below an input. Nested under the `Helper Message` toggle.	`⌘ Input` — "Must be a valid email address"
`Text Description`	Description text below a field label. Nested under the `Description` toggle.	`Text Field [EDS]` — "We'll never share your email"

1.5 Variable Properties

Variables are design tokens bound to Figma variables — they control theming, spacing, and sizing. All use emoji prefixes.

Prefix	Property	Definition	Common values	Example
`🎨`	`Appearance`	The colour theme applied to the component. Maps to the Tone.	`Accent`, `Neutral`	`⌘ Button` — changes fill + text colour per tone
`🪐`	`Selectable Space`	The overall spacing scale for interactive hit areas.	`SM`, `MD`	`⌘ Button` — MD = 36px touch target, SM = compact
`🪐`	`Vertical Space`	Vertical spacing between stacked elements.	`XS`	`Text Field [EDS]` — gap between label and input
`🪐`	`Space Proportions`	The aspect ratio of internal padding (square vs wide).	`Squished`	`⌘ Button` — Squished = wider horizontal padding
`🪐`	`Horizontal Gap`	Horizontal gap between sibling elements.	`MD`	`Checkbox [EDS]` — gap between checkbox and label
`⭕️`	`Border Radius`	The corner rounding of the component.	`Rounded`	`⌘ Button`, `Checkbox [EDS]`, `_Menu [EDS]`
`🅰️`	`Font and Icon Size`	The text and icon sizing scale.	`MD`	`⌘ Button` — MD = 16px text, SM = 14px
`🖼️`	`Icon Size`	The icon sizing, usually synced with font size.	Sync with `🅰️`	`⌘ Button`, `Checkbox [EDS]`

1.6 Instance Swap Properties

Instance Swaps let the user replace a nested component with another from the library.

Property	Definition	Example component
`Item Container Slot`	A swappable slot for custom content inside a container.	`_Menu [EDS]` — swap in different menu item types

2. Component Naming

Rule	Convention	Example
Public component	`ComponentName [EDS]`	`Button [EDS]`
Private / draft component	`_ComponentName [EDS]`	`_Chip [EDS]`
Inner helper component	`⌘ ComponentName`	`⌘ Button`, `⌘ Input`, `⌘ Banner`, `⌘ Accordion`

All components must include the [EDS] suffix.

3. Property Types

Every property must use the correct Figma property type:

Property purpose	Figma type	Naming convention
Predefined options (State, Tone, Style, Variant, Emphasis, Validation)	Variant (Dropdown)	PascalCase — `State`, `Tone`, `Variant`
On/off toggle for checked state	Boolean	`Is` prefix — `Is Checked`, `Is Expanded`, `Is Indeterminate`
On/off toggle for visibility	Boolean	`Show` prefix — `Show Leading Icon`, `Show Focus Frame`
Editable label / content	Text	`Label` for form elements, `Text` for display elements, `Placeholder` for input hints
Helper / description text	Text	Nested under parent toggle — `↳ Helper Message Text`, `Text Description`
Theming / appearance token	Variable	Emoji prefix — `🎨 Appearance`
Spacing token	Variable	Emoji prefix — `🪐 Vertical Space`, `🪐 Selectable Space`, `🪐 Space Proportions`
Horizontal gap token	Variable	Emoji prefix — `🪐 Horizontal Gap`
Border radius token	Variable	Emoji prefix — `⭕️ Border Radius`
Font / icon sizing token	Variable	Emoji prefix — `🅰️ Font and Icon Size`, `🖼️ Icon Size`
Swappable child component	Instance Swap	Descriptive name — `Item Container Slot`

4. Standard Property Values

4.1 Variant (Dropdown) — Hierarchy

Controls visual weight / prominence of interactive elements.

Values	Use for
`Primary`, `Secondary`, `Ghost`	`⌘ Button` (inner helper, nested inside `Button [EDS]` and `Icon Button [EDS]`)

Rule: Primary must be the first value. This maps to the visual hierarchy of the component.

4.2 State (Dropdown) — Interaction states

All interactive components that expose a State property must follow one of these sets:

Set	Values	Use for
Base	`Default`, `Hover`, `Disabled`	Selection controls (Checkbox, Radio, Switch), surfaces (Accordion)
Extended	`Default`, `Hover`, `Focus`, `Active`, `Disabled`	Buttons (`⌘ Button`), Chip
Input	`Default`, `Hover`, `Focus`, `Active`, `Filled`, `Read-only`, `Disabled`	Input fields (`⌘ Input`)

Rule: Every component with a State property must include Default as the first value and Disabled as the last.

4.3 Validation (Dropdown) — Input feedback

Separate from State. Controls the validation appearance of input components.

Values	Use for
`Default`, `Error`	`⌘ Input` (all input-based components: Text Field, Text Area, Search, Auto Complete, Select, ComboBox)

Rule: Validation is independent of State — a field can be in Focus state with Error validation simultaneously.

4.4 Tone (Dropdown) — Semantic colour

Tone values must use semantic names, never raw colour names.

Set	Values	Use for
Action	`Accent`, `Neutral`, `Danger`	Buttons (`Button [EDS]`, `Icon Button [EDS]`)
Feedback	`Info`, `Warning`, `Danger`	Banners (`_Banner [EDS]`)
Full	`Default`, `Neutral`, `Accent`, `Success`, `Warning`, `Danger`, `Info`	Chip (`_Chip [EDS]`)
Badge	`Accent`, `Success`, `Warning`, `Danger`, `Neutral`, `Info`	Badge (`_Badge`)

Rule: Do not use colour names like Green, Blue, Orange, Red as Tone values. Map them to semantic equivalents:

Green → Success

Blue → Info

Orange → Warning

Red → Danger

Error → Danger (align with Button and Banner)

4.5 Style (Dropdown) — Visual treatment

Values	Use for
`Default`, `Outlined`	Badge, Chip
`High Contrast`	Chip (accessibility variant)

Rule: Use Title Case for multi-word values (High Contrast, not High contrast).

4.6 Emphasis (Dropdown) — Visual weight

Values	Use for
`Low`, `Medium`, `High`	Badge

4.7 Booleans — Visibility & state toggles

Convention	Examples	Use for
`Show` prefix	`Show Leading Icon`, `Show Trailing Icon`, `Show Focus Frame`, `Show Button`	Toggling visibility of optional elements
`Show` prefix	`Show Label`, `Description`, `Helper Message`, `Optional/Required`, `Information Icon`	Toggling form field sub-elements
`Is` prefix	`Is Checked`, `Is Indeterminate`	Toggling checked/active states
`Left` / `Right` Adornment	`Left Adornment`, `Right Adornment`	Input field icons/decorations

Rule: Avoid negative names (No Label → Show Label). Always use Title Case for multi-word names (Show Focus Frame, not Show focus frame).

4.8 Text properties

Property	Use for
`Label`	Form controls (Checkbox, Radio, Switch, Button label)
`Text`	Display elements (Badge, Chip, Tooltip)
`Placeholder`	Input hint text (`⌘ Input`)
`↳ Helper Message Text`	Nested helper text for inputs
`Text Description`	Description text below labels
`Tip Position`	Tooltip direction (`Bottom`, `Right`, `Left`, `Top`)

4.9 Variable bindings

All variable tokens use emoji prefixes and Title Case naming:

Prefix	Variable	Common values
`🎨`	`Appearance`	`Accent`, `Neutral`
`🪐`	`Selectable Space`	`SM`, `MD`
`🪐`	`Vertical Space`	`XS`
`🪐`	`Space Proportions`	`Squished`
`🪐`	`Horizontal Gap`	`MD`
`⭕️`	`Border Radius`	`Rounded`
`🅰️`	`Font and Icon Size`	`MD`
`🖼️`	`Icon Size`	Synced with `🅰️ Font and Icon Size`

5. Full Component Property Reference

Complete property listing for every component, including inner helpers and variable bindings.

`Button [EDS]`

Architecture: Outer component set with Tone dropdown → each variant contains a nested ⌘ Button inner helper that holds all interaction properties.

Outer component set:

Property	Type	Values
Tone	Dropdown	`Accent`, `Neutral`, `Danger`
`🎨 Appearance`	Variable	Bound to Tone

Inner ⌘ Button helper:

Property	Type	Values
Variant	Dropdown	`Primary`, `Secondary`, `Ghost`
State	Dropdown	`Default`, `Hover`, `Active`, `Disabled`
Label	Text	—
Show Leading Icon	Boolean	—
Show Trailing Icon	Boolean	—
Show Focus Frame	Boolean	—
`⭕️ Border Radius`	Variable	`Rounded`
`🖼️ Icon Size`	Variable	Synced with `🅰️`
`🪐 Selectable Space`	Variable	`MD`
`🪐 Space Proportions`	Variable	`Squished`
`🅰️ Font and Icon Size`	Variable	`MD`

`Icon Button [EDS]`

Architecture: Same structure as Button — outer Tone, inner helper. Should mirror Button decisions.

Outer component set:

Property	Type	Values
Tone	Dropdown	`Accent`, `Neutral`, `Danger`
`🎨 Appearance`	Variable	Bound to Tone

`Text Field [EDS]`

Architecture: Outer wrapper with label/description section + nested ⌘ Input inner helper.

Label + Description section:

Property	Type	Values
Label	Text	—
Description	Boolean	Toggle description visibility
Text Description	Text	Description content
Optional/Required	Boolean	Toggle "(Optional)" or "(Required)" suffix
Information Icon	Boolean	Toggle info icon next to label

Inner ⌘ Input helper:

Property	Type	Values
State	Dropdown	`Default`, `Hover`, `Focus`, `Active`, `Filled`, `Read-only`, `Disabled`
Validation	Dropdown	`Default`, `Error`
Placeholder	Text	—
Helper Message	Boolean	Toggle helper message visibility
↳ Helper Message Text	Text	Helper message content
Left Adornment	Boolean	Toggle left icon/decoration
Right Adornment	Boolean	Toggle right icon/decoration
Focus Frame	Boolean	—
`🪐 Space Proportions`	Variable	`Squished`
`🎨 Appearance`	Variable	`Neutral`

Outer wrapper:

Property	Type	Values
`🪐 Vertical Space`	Variable	`XS`

Note: Text Area, Search, Auto Complete, Select, and ComboBox share the same ⌘ Input inner helper with the same properties.

`Checkbox [EDS]`

Property	Type	Values
State	Dropdown	`Default`, `Hover`, `Disabled`
Is Checked	Boolean	—
Indeterminate	Boolean	—
No Label	Boolean	—
Show focus frame	Boolean	—
Label	Text	—
`⭕️ Border Radius`	Variable	`Rounded`
`🖼️ Icon Size`	Variable	Synced with `🅰️`
`🪐 Horisontal gap`	Variable	`MD`
`🪐 Selectable Space`	Variable	`MD`
`🪐 Space Proportions`	Variable	`Squished`
`🅰️ Font and Icon Size`	Variable	`MD`
`🎨 Appearance`	Variable	`Accent`

`Radio Button [EDS]`

Property	Type	Values
State	Dropdown	`Default`, `Hover`, `Disabled`
Is Checked	Boolean	—
Show focus frame	Boolean	—
Label	Text	—

`Switch [EDS]`

Property	Type	Values
State	Dropdown	`Default`, `Hover`, `Disabled`
Is Checked	Boolean	—
Show focus frame	Boolean	—
Label	Text	—

`_Badge`

Property	Type	Values
Tone	Dropdown	`Accent`, `Success`, `Warning`, `Error`, `Neutral`, `Info`
Emphasis	Dropdown	`Low`, `Medium`, `High`
Style	Dropdown	`Solid`, `Outlined`
Variant	Dropdown	`Label`, `Statut`
Text	Text	—
`🎨 Appearance`	Variable	`Accent`

`_Chip [EDS]`

Architecture: Outer component set with Tone dropdown → inner _Chip with all interaction properties.

Outer component set:

Property	Type	Values
Tone	Dropdown	`Neutral`, `Accent`, `Green`, `Blue`, `Orange`, `Red`

Inner _Chip:

Property	Type	Values
Tone	Dropdown	`Default`, `Neutral`, `Accent`, `Green`, `Blue`, `Orange`, `Red`
Variant	Dropdown	`Default`, `Checked`, `Deletable`, `Dropdown`, `💠 Custom`
Style	Dropdown	`Default`, `Outlined`, `High contrast`
State	Dropdown	`Default`, `Hover`, `Focus`, `Active`
Text	Text	—

`_Banner [EDS]`

Property	Type	Values
Tone	Dropdown	`Info`, `Warning`, `Danger`
Nested: `⌘ Banner`	Instance	—
Nested: `⌘ Button`	Instance	(see Button inner helper)

`_Tooltip [EDS]`

Property	Type	Values
Tip Position	Dropdown	`Bottom`, `Right`, `Left`, `Top`
Text	Text	—

`_Snackbar [EDS]`

Property	Type	Values
Show Button	Boolean	—
Nested: `Button [EDS]`	Instance	—
`🪐 Selectable Space`	Variable	`SM`

`_Menu [EDS]`

Property	Type	Values
Scroll bar	Boolean	—
Item Container Slot	Instance Swap	—
`⭕️ Border Radius`	Variable	`Rounded`

`_Accordion [EDS]`

Property	Type	Values
State	Dropdown	`Default`, `Hover`, `Disabled`
Nested: `⌘ Accordion`	Instance	—

`_Link [EDS]`

Property	Type	Values
Nested: Type	Instance	—

alexlvrs · 2026-03-05T09:44:23Z

alexlvrs
Mar 5, 2026
Maintainer Author

Naming/Properties to Fix

Individual review for each component that needs changes. Tick the checkbox when done.

`_Badge`

Feedback: Most issues of any component — missing suffix, typo in variant value, Tone naming doesn't match the rest of the system. Style uses Solid instead of Default (inconsistent with Chip).

#	Category	Current	Change to	Done
1	Naming	`_Badge`	`_Badge [EDS]` — add missing suffix	- [ ]
2	Variant value	`Statut`	`Status` — fix typo	- [ ]
3	Tone value	`Error`	`Danger` — align with Button, Banner, Chip	- [ ]
4	Style value	`Solid`	`Default` — align with Chip convention, or keep `Solid` and document as intentional	- [ ]

`_Chip [EDS]`

Feedback: Tone uses raw colour names instead of semantic names. State is missing Disabled. Style value High contrast has inconsistent casing.

#	Category	Current	Change to	Done
5	Tone value	`Green`	`Success`	- [ ]
6	Tone value	`Blue`	`Info`	- [ ]
7	Tone value	`Orange`	`Warning`	- [ ]
8	Tone value	`Red`	`Danger`	- [ ]
9	State values	`Default, Hover, Focus, Active`	Add `Disabled` as last value	- [ ]
10	Style value	`High contrast`	`High Contrast` — Title Case	- [ ]

`Button [EDS]` / `⌘ Button`

Feedback: Inner ⌘ Button State is missing Focus — this is an interactive element that should support focus indication. State should use the Extended set.

#	Category	Current	Change to	Done
11	State values	`Default, Hover, Active, Disabled`	Add `Focus` → `Default, Hover, Focus, Active, Disabled`	- [ ]

`Icon Button [EDS]`

Feedback: Should mirror whatever decision is made for ⌘ Button. Verify inner helper has same State set.

#	Category	Current	Change to	Done
12	State	Mirror `⌘ Button`	Ensure inner helper matches Button changes	- [ ]

`Text Field [EDS]`

Feedback: Typo in nested text property name Text Decription (missing 'i'). Otherwise well-structured with Label, Description, Validation, and Adornments.

#	Category	Current	Change to	Done
13	Property name	`Text Decription`	`Text Description` — fix typo	- [ ]

`Checkbox [EDS]`

Feedback: Multiple naming issues: negative boolean, missing prefix, wrong casing, and a typo in a variable name.

#	Category	Current	Change to	Done
14	Boolean name	`No Label`	`Show Label` — invert to avoid negative booleans	- [ ]
15	Boolean name	`Show focus frame`	`Show Focus Frame` — Title Case	- [ ]
16	Boolean name	`Indeterminate`	`Is Indeterminate` — add `Is` prefix for state booleans	- [ ]
17	Variable name	`🪐 Horisontal gap`	`🪐 Horizontal Gap` — fix typo + Title Case	- [ ]

`Radio Button [EDS]`

Feedback: Same Show focus frame casing issue as Checkbox.

#	Category	Current	Change to	Done
18	Boolean name	`Show focus frame`	`Show Focus Frame` — Title Case	- [ ]

`Switch [EDS]`

Feedback: Same Show focus frame casing issue as Checkbox and Radio.

#	Category	Current	Change to	Done
19	Boolean name	`Show focus frame`	`Show Focus Frame` — Title Case	- [ ]

`_Menu [EDS]`

Feedback: Boolean property Scroll bar is missing the Show prefix and is not capitalised correctly.

#	Category	Current	Change to	Done
20	Boolean name	`Scroll bar`	`Show Scroll Bar` — add prefix + Title Case	- [ ]

`Tab` (WIP)

Feedback: Still in progress. Example section shows Confortable — fix the typo before publishing.

#	Category	Current	Change to	Done
21	Example label	`Confortable`	`Comfortable` — fix typo	- [ ]

`Card` (WIP)

Feedback: Still in progress. Same Confortable typo as Tab. When building the component set, follow the rules above for State, Tone, and naming.

#	Category	Current	Change to	Done
22	Example label	`Confortable`	`Comfortable` — fix typo	- [ ]

Components with no changes needed

These components follow the current rules correctly:

Component	Notes
`_Tooltip [EDS]`	`Tip Position` (Dropdown: Bottom, Right, Left, Top), `Text` (Text)
`_Banner [EDS]`	`Tone` (Dropdown: Info, Warning, Danger), nested `⌘ Banner`, `⌘ Button`
`_Snackbar [EDS]`	`Show Button` (Boolean), nested `Button [EDS]`, `🪐 Selectable Space` (Variable: SM)
`_Link [EDS]`	No variant props, nested Type instance only
`_Accordion [EDS]`	`State` (Dropdown: Default, Hover, Disabled), nested `⌘ Accordion`

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Naming convention and properties consistencies #4621

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Naming convention and properties consistencies #4621

Uh oh!

Uh oh!

alexlvrs Mar 5, 2026 Maintainer

1. Summary of Rules

1.1 Naming

1.2 Dropdown Properties

1.3 Boolean Properties

Show prefix — Visibility toggles

Is prefix — State toggles

1.4 Text Properties

1.5 Variable Properties

1.6 Instance Swap Properties

2. Component Naming

3. Property Types

4. Standard Property Values

4.1 Variant (Dropdown) — Hierarchy

4.2 State (Dropdown) — Interaction states

4.3 Validation (Dropdown) — Input feedback

4.4 Tone (Dropdown) — Semantic colour

4.5 Style (Dropdown) — Visual treatment

4.6 Emphasis (Dropdown) — Visual weight

4.7 Booleans — Visibility & state toggles

4.8 Text properties

4.9 Variable bindings

5. Full Component Property Reference

Button [EDS]

Icon Button [EDS]

Text Field [EDS]

Checkbox [EDS]

Radio Button [EDS]

Switch [EDS]

_Badge

_Chip [EDS]

_Banner [EDS]

_Tooltip [EDS]

_Snackbar [EDS]

_Menu [EDS]

_Accordion [EDS]

_Link [EDS]

Replies: 1 comment

Uh oh!

Uh oh!

alexlvrs Mar 5, 2026 Maintainer Author

Naming/Properties to Fix

_Badge

_Chip [EDS]

Button [EDS] / ⌘ Button

Icon Button [EDS]

Text Field [EDS]

Checkbox [EDS]

Radio Button [EDS]

Switch [EDS]

_Menu [EDS]

Tab (WIP)

Card (WIP)

Components with no changes needed

alexlvrs
Mar 5, 2026
Maintainer

`Show` prefix — Visibility toggles

`Is` prefix — State toggles

`Button [EDS]`

`Icon Button [EDS]`

`Text Field [EDS]`

`Checkbox [EDS]`

`Radio Button [EDS]`

`Switch [EDS]`

`_Badge`

`_Chip [EDS]`

`_Banner [EDS]`

`_Tooltip [EDS]`

`_Snackbar [EDS]`

`_Menu [EDS]`

`_Accordion [EDS]`

`_Link [EDS]`

alexlvrs
Mar 5, 2026
Maintainer Author

`_Badge`

`_Chip [EDS]`

`Button [EDS]` / `⌘ Button`

`Icon Button [EDS]`

`Text Field [EDS]`

`Checkbox [EDS]`

`Radio Button [EDS]`

`Switch [EDS]`

`_Menu [EDS]`

`Tab` (WIP)

`Card` (WIP)