Component naming
How components, variants, layers, and slots are named — an interactive guide (revised v1.1).
The naming system, made tangible. Hover anything — names break down into their parts, properties explain themselves, and the component anatomy highlights as you explore.
Anatomy of a name
Use this to understand component names. Hover each part to see the category and name; reusable sub-parts are joined with a dot.
Groups components by family, like action, surface, feedback, navigation, data-display, layout, or form. Use lowercase names, and use kebab-case for multi-word values.
Card.Header creates the top area of a Card. Use it when the header needs to stay consistent between Figma and code.
Component names
Real examples help you see how a card breaks down and what it becomes in code. Use it when you want to understand the structure at a glance.
Correct names
An interactive control that triggers an action. Use it for components in the `action` category with a PascalCase name.
Use an icon-only button for compact actions that don’t need a text label. It’s a separate component because its shape and spacing create a distinct affordance.
A surface that groups related content so it feels like one clear unit.
A container for composed content that uses a slot for its body. Use it when you want to wrap shared structure around whatever is passed into the slot.
A short-lived message that confirms an action or shares status. Use it when you need to give quick feedback without interrupting the user.
Form inputs let people enter, choose, or edit information. Use this category to group controls that collect input in a form.
Use bottom navigation to switch between a small set of top-level destinations in an app. It works best when those destinations are the main places people visit often.
Use kebab-case for multi-word categories. It keeps names consistent and easy to scan.
Use this primitive to build a layout from predefined variants. Choose the variant that matches the structure you need.
Use dot notation for reusable sub-components that belong to a parent component. This keeps related pieces easy to find and understand.
What to avoid — hover for the fix
Variant properties
Shows how a component changes across states or options. Hover a property to see the rule.
Use family-specific values instead of one shared list: buttons use primary · secondary · tertiary · ghost · destructive, while surfaces use outlined · filled · elevated.
Defines the size options available to components. Each component uses only the sizes it needs.
Use this for mobile-first states where hover isn’t available. Focus should appear as a ring using the `border.focused` token, not a separate fill.
Sets the layout axis when a component supports horizontal or vertical placement.
A simple yes/no choice, such as on/off or true/false. Use it when the user picks between two fixed options, not when the control represents a state or a visual variant.
Shows or hides a fixed icon in the control. Use `hasIcon` with `icon` when the icon doesn’t change.
Chooses which icon to show. Always use it with its matching hasIcon boolean.
Use this to read or update a text layer’s content. It’s the layer’s `text` property.
Anatomy of a component
Shows a labelled list item with connected hover feedback. Use it when a region and its role chip should feel like one related choice.