@aristobyte-ui/button

@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.

📜 License

MIT © AristoByte

🛡 Shields Showcase