abaabil.button

Button Component

The Button component is a versatile and accessible button implementation that can be used for various interactive elements in your application.

Installation

npm install abaabil.temp.button

Importing

Import the Button component from the package:

import Button from 'abaabil.temp.button';

Basic Usage

<Button>Click me</Button>

Examples

Standard Button

<Button>Click me</Button>

Button with Icon

<Button icon="user">Profile</Button>

Icon-only Button

<Button icon="settings" ariaLabel="Settings" />

Button with Action Icon

<Button actionIcon="arrow-right">Next</Button>

Disabled Button

<Button disabled>Unavailable</Button>

Link styled as Button

<Button as="a" href="/path">Go to Page</Button>

Properties

Property	Type	Description	Default	Required
as	'button' | 'a'	Renders component as button or anchor	'button'	No
icon	string	Icon ID to display before text	-	No
children	ReactNode	Button content	-	No
actionIcon	string	Icon ID to display after text	-	No
className	string	Additional CSS classes	-	No
disabled	boolean	Disables the button	false	No
isPressed	boolean	Sets aria-pressed state	-	No
ariaLabel	string	Accessibility label for icon-only buttons	-	No

The Button component also forwards all other props to the underlying element.

Styling

The Button component comes with default styling classes:

• Base classes: max-w-full inline-flex items-center justify-center font-bold tracking-df h-df text-df px-df rounded-df
• Enabled state: bg-stable text-on-stable hover:bg-stable-hover focus:bg-stable-focus active:bg-stable-active
• Disabled state: bg-stable-disabled text-on-stable-disabled

You can customize the appearance using the className prop and your own CSS.

Accessibility

The Button component enhances accessibility by:

• Using semantic HTML elements (<button> or <a>)
• Providing proper ARIA attributes (aria-label, aria-pressed, aria-disabled)
• Supporting keyboard interactions

Notes

• The component uses React's forwardRef to allow ref forwarding.
• Icons are rendered using a separate Icon component from abaabil.temp.icon. Ensure this dependency is available in your project.
• The component uses the classnames library for conditional class application.