skills.rest
tchiphuong
tchiphuongCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

heroui-buttons

Document Hero UI Button, ButtonGroup, and CloseButton components with usage examples.

Updated Feb 27, 2025
Search Tags:#react#frontend development#ui components#buttons#ux#hero ui
One-click install
npx skills add https://github.com/tchiphuong/UniManage --skill heroui-buttons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-buttons
Source: https://github.com/tchiphuong/UniManage/tree/main/.agent/skills/heroui-buttons
Command: npx skills add https://github.com/tchiphuong/UniManage --skill heroui-buttons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive documentation and usage examples for Hero UI's Button, ButtonGroup, and CloseButton components, enabling developers to implement consistent and accessible button interactions within the UniManage project.

Core Features & Use Cases

  • Button Component: Covers variants (primary, secondary, tertiary, ghost, danger), sizes (sm, md, lg), states (hover, active, focus, disabled, pending), and common props.
  • ButtonGroup Component: Demonstrates grouping related buttons for better UI organization and user experience.
  • CloseButton Component: Provides guidance on using specialized close buttons for modals, dialogs, and dismissible elements.
  • Use Case: Quickly implement a set of action buttons for a form, including a primary save button with a loading state and a secondary cancel button, ensuring they adhere to Hero UI's design system.

Quick Start

Use the heroui-buttons skill to generate a primary button with the text 'Submit'.

Frequently Asked Questions about heroui-buttons

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

FAQPage Schema
How do I implement a loading state for a React button in Hero UI?▼

To implement a loading state for a Hero UI button, use the pending state property available on the Button component. This allows you to visually indicate processing actions, such as form submissions, while maintaining accessibility standards.

What is the best way to group related action buttons in a React application?▼

The best way to group related action buttons in a React application is using the Hero UI ButtonGroup component. It facilitates better UI organization by clustering interactive elements like form actions together for an improved user experience.

How do I add a close button to a dismissible modal in Hero UI?▼

To add a close button to a dismissible modal in Hero UI, use the dedicated CloseButton component. It is specifically designed to handle dismissible UI patterns for dialogs and modals, ensuring proper accessibility and user experience.

What button variants and sizes are available in Hero UI v3?▼

Hero UI v3 Button components support variants including primary, secondary, tertiary, ghost, and danger. Available sizes are sm, md, and lg, allowing developers to implement consistent design system patterns for various interactive elements.

Does Hero UI support accessible disabled and focus states for form buttons?▼

Yes, Hero UI supports accessible disabled, focus, hover, and active states for form buttons. The component documentation covers these specific props and best practices to ensure interactive elements meet accessibility and user experience standards.

Related Skills

Explore More Software Engineering Skills→
tchiphuongtchiphuong

heroui-navigation

Provide reusable Hero UI v3 navigation components for React frontends.

Community
Basic
codexyzdevcodexyzdev

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Intermediate
vipulj226-designvipulj226-design

forms

Handle form validation and submission in React with react-hook-form.

Community
Intermediate
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced