Button

6th lightest of the eight, by js weight

A single element (a <button> by default, or anything via as), themed through CSS custom properties. The a11y tier has no hooks either, so it renders in a Server Component just like the other two tiers.

Example (a11y tier)

as="a" isn't shown here: for any as other than the default "button", the a11y tier attaches an onKeyDown handler (so Space and Enter still activate it, which a non-button element does not get natively). A function prop can't cross a Server Component boundary onto a host element, so that variant needs a client component, not a static page like this one.

Import

import Button from 'abaabil/button'         // structure only

import Button from 'abaabil/button/styled'  // + CSS

import Button from 'abaabil/button/a11y'    // + keyboard/ARIA behaviour

What the a11y tier adds

Renders a real disabled attribute by default; pass keepFocusable to use aria-disabled instead, so screen reader users can still find the control.
When as is not "button" (e.g. an <a>), it adds role="button", tabIndex, and Space/Enter activation, since a non-button element does not get those for free.
Warns in development if an icon-only button (leftIcon/rightIcon with no text) has no aria-label or aria-labelledby.
Only attaches the handlers it actually needs, so a plain button with no onClick still serializes cleanly from a server module.

Props

Prop	Type	Default	Tier	Description
`as`	ElementType	`'button'`	all	Element or component to render.
`type`	string	`'button'`	normal/styled	Button type, applied only when rendering a real `<button>`.
`className`	string	—	all	Merged with the base class.
`disabled`	boolean	`false`	a11y	Disables the control and suppresses its handlers.
`keepFocusable`	boolean	`false`	a11y	Use `aria-disabled` instead of the native `disabled` attribute.
`leftIcon`	ReactNode	—	a11y	Rendered before children, marked `aria-hidden`.
`rightIcon`	ReactNode	—	a11y	Rendered after children, marked `aria-hidden`.
`onClick` / `onKeyDown`	function	—	all	Standard handlers; suppressed while disabled.
`data-variant`	`'secondary'` \| `'ghost'`	—	styled/a11y	Selected by CSS attribute selector; omit for the primary look.
`data-size`	`'sm'` \| `'lg'`	—	styled/a11y	Selected by CSS attribute selector; omit for the medium size.
...props	—	—	all	Everything else spreads onto the root element.