Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@aristobyte-ui/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@aristobyte-ui/button

Fully-featured, modular Button components for AristoByteUI with ripple effects, composable groups, variants, appearances, sizes, radius options, icons, and loading states.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/button

# Or via npm
npm install -D @aristobyte-ui/button

# Or via pnpm
pnpm add -D @aristobyte-ui/button

🛠 Usage

import { Button, ButtonGroup } from "@aristobyte-ui/button";
import { IconSample } from "@aristobyte-ui/icons";

<Button variant="primary" appearance="solid" size="md" radius="md" icon={{ component: IconSample, align: "left" }}>
  Click Me
</Button>

<ButtonGroup variant="secondary" size="md" align="horizontal">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

📂 Presets Available

Button Variants: default, primary, secondary, success, error, warning
Button Appearances: solid, outline,outline-dashed, no-outline, glowing
Button Sizes: xsm, sm, md, lg, xlg
Button Radius: none, sm, md, lg, full
ButtonGroup Alignment: horizontal, vertical

🔧 Example in a Package

<Button variant="success" appearance="glowing" size="lg" radius="full" isLoading spinnerType="duo">
  Submit
</Button>

<ButtonGroup variant="primary" size="sm" align="vertical">
  <Button>Save</Button>
  <Button>Cancel</Button>
</ButtonGroup>

📊 Why This Matters

Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
AristoByteUI ready: Seamlessly integrates with design tokens and SCSS modules.
Flexible: Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and composable groups.

🏆 Philosophy

Modular architecture: Button and ButtonGroup components are fully composable.
Declarative styling: SCSS modules keep styles maintainable and scoped.
Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

JSPM