Button

The Button component is a fundamental UI element that provides various styles, sizes, and states to accommodate different use cases in your application.

Import

import { Button } from 'h2o-library';

Basic Usage

Simple Button

<Button label="Click me" />

With Icons

<Button icon="plus" label="Add Item" />
<Button icon="chevron-right" label="Next" />

Icon Only Button

<Button iconOnly icon="plus" tooltip="Add new item" />

Variants

The Button component supports four variants:

<Button label="Primary" />
<Button variant="secondary" label="Secondary" />
<Button variant="ghost" label="Ghost" />
<Button variant="danger" label="Danger" />

Sizes

Three sizes are available: small, medium, and large.

<Button size="sm" label="Small" />
<Button size="md" label="Medium" />
<Button size="lg" label="Large" />

Interactive Examples

For interactive examples including loading states, async actions, and more complex use cases, check out our example component:

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "ghost" | "danger"	"primary"	The visual style of the button
size	"sm" | "md" | "lg"	"md"	The size of the button
label	string	undefined	The text content of the button
leftIcon	IconType	undefined	Icon to display on the left side of the label
rightIcon	IconType	undefined	Icon to display on the right side of the label
iconOnly	IconType	undefined	Renders only an icon without any label
isLoading	boolean	false	Shows a loading spinner and disables the button
tooltip	string	undefined	Text to display in a tooltip when hovering over the button
tooltipPosition	"top" | "bottom" | "left" | "right"	"top"	Position of the tooltip relative to the button
disabled	boolean	false	Disables the button
className	string	""	Additional CSS classes to apply to the button

Design Considerations

• Use primary for main actions
• Use secondary for alternative actions
• Use ghost for subtle actions
• Use danger for destructive actions
• Always include a tooltip for icon-only buttons
• Keep button labels concise and action-oriented

Accessibility

• Buttons are keyboard accessible and can be triggered with the Enter or Space key
• When using iconOnly, always provide a tooltip for screen reader accessibility
• The loading state is properly announced to screen readers
• Focus states are clearly visible for keyboard navigation