Button

The Button component provides a reusable, styled button with various configuration options for appearance and behavior. It supports several visual variants and can accept any standard HTML button attributes.

Installation

bash
npm i @anakin-gbit/button

Usage

JSX
<Button>Primary</Button>
<Button variant="secondary" label="Secondary" />

Styling

Buttons are styled using these CSS variables:

Backgrounds: --pallet-button --pallet-button-hover --pallet-button-disabled --pallet-background --pallet-background-alt --pallet-highlight --pallet-link --pallet-link-hover --pallet-divider --pallet-border

Text: --pallet-text --pallet-text-muted --pallet-button-text --pallet-button-link-text --pallet-button-outline-text --pallet-button-disabled-text --pallet-button-hovertext

The easy way to set these variables is to use the styles package, which automatically sets them when you specify a theme.

JSX
<div className="theme3">
  <Button variant="primary" label="Primary" />
</div>

Themed button variants:

Theme 0:

Theme 1:

Theme 2:

Theme 3:

Theme 4:

Variants

JSX
<Button variant="primary" label="Primary" />
<Button variant="secondary" label="Secondary" />
<Button variant="danger" label="Danger" />
<Button variant="outline" label="Outline" />
<Button variant="link" label="Link" />