Ui Component Naming Generator

What Is a UI Component Naming Generator?

A UI component naming generator helps developers and designers create consistent names for interface elements such as buttons, input fields, cards, navigation menus, and dropdowns. Consistent naming makes components easier to identify, reuse, and maintain across a website or application.

This tool generates naming formats based on four inputs: component, variant, size, and state. It supports developers working with CSS classes, JavaScript or React components, and data attribute selectors.

How to Use the UI Component Naming Generator

1. Enter the component: Specify the UI element, such as button, input, or card.

2. Add a variant: Enter the style or purpose, such as primary, secondary, or outline.

3. Choose a size: Specify a size such as sm, md, or lg.

4. Define the state: Enter a state such as hover, disabled, or active.

5. Click Generate: Review the generated names in the available naming formats.

UI Component Naming Example

Suppose you are creating a primary button for a web application and need a consistent name for its medium-sized hover state.

Input

• Component: button

• Variant: primary

• Size: md

• State: hover

Output

These examples illustrate possible naming patterns. The actual output should match the formats generated by the tool.

Common UI Component Naming Conventions

BEM Naming Convention

BEM stands for Block, Element, Modifier. It provides a structured way to name CSS classes and distinguish components from their elements and variations.

Kebab-Case

Kebab-case separates words with hyphens, such as primary-button or btn-primary-md-hover. It is commonly used for CSS class names.

PascalCase

PascalCase capitalizes the first letter of each word, as in PrimaryButton. It is commonly used for React component names and other JavaScript identifiers.