@versini/ui-button

A comprehensive collection of accessible React button components built with TypeScript and TailwindCSS.

The Button package provides a complete set of button components including standard buttons, icon buttons, link buttons, and copy-to-clipboard buttons. All components are fully accessible, keyboard navigable, and support multiple themes and variants.

Table of Contents

• Features
• Installation
• Usage
• API

Features

• 🎯 Multiple Button Types: Button, ButtonIcon, ButtonLink, ButtonCopy
• ♿ Accessible: WCAG compliant with proper ARIA support and keyboard navigation
• 🎨 Customizable: Multiple variants, sizes, and styling options
• 🌲 Tree-shakeable: Import only the components you need
• 🔧 TypeScript: Fully typed with comprehensive prop definitions
• 🎭 Theme Support: Built-in support for light, dark, and system themes

Installation

npm install @versini/ui-button

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Button

import { Button } from "@versini/ui-button/button";

function App() {
  return (
    <Button variant="primary" onClick={() => console.log("Button clicked!")}>
      Click me
    </Button>
  );
}

Button with Icon

import { ButtonIcon } from "@versini/ui-button/button-icon";
import { IconSettings } from "@versini/ui-icons";

function App() {
  return (
    <ButtonIcon
      label="Settings"
      onClick={() => console.log("Settings clicked!")}
    >
      <IconSettings />
    </ButtonIcon>
  );
}

Link Button

import { ButtonLink } from "@versini/ui-button/button-link";

function App() {
  return (
    <ButtonLink href="https://example.com" target="_blank" variant="secondary">
      Visit Website
    </ButtonLink>
  );
}

Copy Button

import { ButtonCopy } from "@versini/ui-button/button-copy";

function App() {
  return <ButtonCopy copyToClipboard="Hello, World!" labelLeft="Copy" />;
}

Different Variants

import { Button } from "@versini/ui-button/button";

function VariantExamples() {
  return (
    <div className="space-x-2">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="selected">Selected</Button>
    </div>
  );
}

Different Sizes

import { Button } from "@versini/ui-button/button";

function SizeExamples() {
  return (
    <div className="space-x-2">
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>
    </div>
  );
}

Icon Button with Labels

import { ButtonIcon } from "@versini/ui-button/button-icon";
import { IconUser, IconSettings, IconSave } from "@versini/ui-icons";

function IconButtonExamples() {
  return (
    <div className="space-x-2">
      <ButtonIcon label="User profile">
        <IconUser />
      </ButtonIcon>

      <ButtonIcon labelLeft="Save document">
        <IconSave />
      </ButtonIcon>

      <ButtonIcon labelRight="Settings">
        <IconSettings />
      </ButtonIcon>
    </div>
  );
}

Theme Modes

import { Button } from "@versini/ui-button/button";

function ThemeExamples() {
  return (
    <div className="space-x-2">
      <Button mode="light">Light Mode</Button>
      <Button mode="dark">Dark Mode</Button>
      <Button mode="system">System Mode</Button>
    </div>
  );
}

API

Button Props

| Prop | Type | Default | Description | | --------- | ---------------------------------------------------- | ----------- | -------------------------------------------------- | | children | React.ReactNode | - | The text to render in the button | | variant | "primary" \| "secondary" \| "danger" \| "selected" | "primary" | The variant style of the Button | | size | "small" \| "medium" \| "large" | "medium" | The size of the Button | | disabled | boolean | false | Whether or not the Button is disabled | | fullWidth | boolean | false | Whether or not the Button is full width | | mode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The mode of Button | | focusMode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The type of focus for the Button | | noBorder | boolean | false | Whether or not to render the Button with a border | | raw | boolean | false | Whether or not to render the Button with styles | | radius | "small" \| "medium" \| "large" | "large" | The rounded style of the Button | | truncate | boolean | false | Whether or not to truncate the text automatically | | className | string | - | CSS class(es) to add to the main component wrapper | | onClick | React.MouseEventHandler<HTMLButtonElement> | - | Handler to call when the Button is clicked |

ButtonIcon Props

| Prop | Type | Default | Description | | ------------- | ---------------------------------------------------- | ----------- | --------------------------------------------------------------- | | children | React.ReactNode | - | The icon to render in the button | | label | string | - | The label to use as aria-label (required if no labelLeft/Right) | | labelLeft | string | - | The label to show to the left of the icon | | labelRight | string | - | The label to show to the right of the icon | | variant | "primary" \| "secondary" \| "danger" \| "selected" | "primary" | The variant style of the Button | | size | "small" \| "medium" \| "large" | "medium" | The size of the Button | | align | "left" \| "right" \| "center" | "center" | Cell content alignment | | noBackground | boolean | false | Option to make the Button transparent | | animated | boolean | false | Whether or not to animate the label when displayed | | iconClassName | string | - | The extra class name to pass to the icon itself |

Inherits all common button props (mode, focusMode, disabled, etc.)

ButtonLink Props

| Prop | Type | Default | Description | | --------------- | -------------------------------------------- | --------- | ------------------------------------------- | | href | string | - | A valid URL of a linked resource | | target | "_blank" \| "_self" \| "_parent" \| "_top" | "_self" | Where to display the linked resource | | noNewWindowIcon | boolean | false | Whether to add an icon for new window links |

Inherits all Button props

ButtonCopy Props

| Prop | Type | Default | Description | | --------------- | -------------------------- | ------- | ---------------------------------- | | copyToClipboard | string \| (() => string) | - | What text to copy to the clipboard |

Inherits all ButtonIcon props except children, align, label, fullWidth, size