Button Convention

Define button variants, icons, and placement for consistent UI.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/dnsnamdang/hrm-claude-config --skill button-convention
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Button Convention
Source: https://github.com/dnsnamdang/hrm-claude-config/tree/main/nhatlinh/.claude/skills/button-convention
Command: npx skills add https://github.com/dnsnamdang/hrm-claude-config --skill button-convention

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures a uniform, clear interface with standard Button appearances, aiding developers in building consistent user experiences across a project.

Core Features & Use Cases

  • Button Variants: Consistent usage of different Button variants like Primary, Secondary, and Tertiary to reflect actions' importance.
  • Iconography: Standard icon usage for common actions like 'Add', 'Edit', and 'Delete'.
  • Placement: Defined order of buttons within toolbars, forms, and modals.
  • Usage Examples: Guiding through typical usage like adding a new item or deleting an entry from a table.

Quick Start

To use a primary button to 'Add a New Record', you should select the 'Add New' button from the 'New Entry' modal.

Frequently Asked Questions about Button Convention

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are UI button conventions for maintaining consistent design in a software project?

UI button conventions provide predefined styling guidelines, iconography, and placement logic to ensure a uniform and intuitive interface across a software project. They standardize button variants to reflect action importance.

How do I use Primary, Secondary, and Tertiary button variants for UX standards?

Use Primary, Secondary, and Tertiary button variants to reflect the importance of UI actions. This ensures consistent button design by distinguishing main actions from alternative or less critical interface interactions.

What is the correct button placement order for toolbars, forms, and modals?

Correct button placement involves following a defined order of buttons within toolbars, forms, and modals. This placement logic maintains a consistent interface and guides users intuitively through typical software interactions.

Can I use standard UI guidelines for common button actions like Add, Edit, and Delete?

Yes, UI guidelines provide standard icon usage for common actions like Add, Edit, and Delete. This iconography ensures developers maintain consistent user experiences when building interfaces for typical data entry tasks.

Do I need specific dependencies to implement a button convention in my project?

No specific dependencies are required to implement this button convention. It focuses on providing styling guidelines, iconography, and placement logic to establish a uniform interface without relying on external component libraries.

What is the best way to standardize button design for adding or deleting table entries?

The best way to standardize button design is by following predefined usage examples, such as selecting a Primary 'Add New' button from a modal to add a record, ensuring consistent UI actions across the software project.