Button

Overview

Button is the foundational interactive element. It supports six visual variants and eight size options, is fully accessible via keyboard, and accepts an asChild prop for rendering as any element (e.g., a link) while keeping button styling.

Usage

import { Button } from "@leanicon/web-builder-library";

<Button>Get started</Button>;

Variants

Visual variants

Sizes

With icon

As link (asChild)

Use asChild to delegate rendering to a child element while keeping all button styles applied.

Disabled

Notes

• Icon-only buttons must include an aria-label for screen reader accessibility.
• asChild uses Radix UI Slot under the hood — the child must accept and forward ref and event props.
• Dark mode is handled automatically via semantic design tokens (bg-primary, text-primary-foreground, etc.).