skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

button-usage

Standardize Button variants, themes, and loading states in React/TypeScript UI kits.

2|Updated Dec 2, 2024
Search Tags:#typescript#accessibility#react#tokens#design-system#ui-kit#button
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill button-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: button-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/button-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill button-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Button usage varies across apps, causing inconsistent UX and extra design overhead.

Core Features & Use Cases

  • Standardized variants and themes for Button: primary, secondary, tertiary, danger, and warning with solid, light, outlined, borderless, and unstyled themes.
  • Loading and accessibility: isLoading, loadingText, and proper disabled states without custom overrides.
  • Navigation patterns: use LinkButton for navigation when a button should look like a link.

Quick Start

Apply the Button component with appropriate variant, theme, and size props to implement the intended action.

Frequently Asked Questions about button-usage

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

FAQPage Schema
How do I standardize button variants and themes in a React UI kit?▼

Standardize React UI kit button variants by applying token-driven styling props for primary, secondary, tertiary, danger, and warning themes. This reduces design overhead and ensures consistent UI by enforcing predefined solid, light, outlined, borderless, and unstyled visual themes.

How do I handle loading and disabled states for a button in TypeScript?▼

Handle button loading states in TypeScript by using the isLoading and loadingText props to manage accessibility and disabled states. This approach prevents the need for custom overrides and ensures proper disabled behavior during asynchronous actions.

When should I use a LinkButton instead of a standard Button for navigation?▼

Use a LinkButton for navigation when a button should look like a link. This ensures correct semantic routing and accessibility within your React application while maintaining visual consistency with standard button components.

Does this button standardization approach work with token-driven design systems?▼

Yes, this button standardization approach works directly with token-driven design systems. It enforces styling through variant, theme, and size props mapped to design tokens, ensuring UI consistency across React and TypeScript projects.

What is the best way to manage button sizes without custom CSS overrides?▼

Manage button sizes without custom CSS overrides by using the built-in size prop. This feature applies predefined token-driven dimensions to the Button component, maintaining strict UI consistency across your design system.

Why does button usage vary across apps and how does this approach fix it?▼

Button usage varies across apps due to uncontrolled custom overrides, causing inconsistent UX. This approach fixes inconsistency by enforcing standardized variants, themes, and loading states through token-driven props in React UI kits.

Related Skills

Explore More Software Engineering Skills→
ricardohg1998-createricardohg1998-create

design-system-forge

Define design tokens, base UI components, and governance artifacts with automated documentation.

Community
Advanced
LeonMelamudLeonMelamud

react-ui-patterns

Manage React UI states for loading, error, and empty conditions.

Community
Intermediate
Kevin-Liu-01Kevin-Liu-01
16

reticle-design-system

Organize UI design tokens, layout primitives, and components into a cohesive system.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

mui-base

Integrate headless MUI primitives into custom React design systems.

Community
Intermediate