Button

A button styled component for user interaction.

<div className="flex flex-wrap gap-4">
    <Button>Default</Button>
    <Button clr="primary">Primary</Button>
    <Button clr="secondary">Secondary</Button>
    <Button clr="accent">Accent</Button>
    <Button clr="destructive">Destructive</Button>
    <Button clr="muted">Muted</Button>
    <Button clr="blank">Blank</Button>
</div>

Overview

The Button component provides a standardized way to create interactive buttons throughout your application. It comes with various color options, outline styles, and shape variants to support different visual hierarchies and usage contexts.

Button

Description

A versatile button component that handles user interactions with customizable styling options.

Usage

import { Button } from "@crafted-ui/react";

<Button>Click me</Button>

Props

The Button component accepts the following props:

PropTypeDefaultDescription
clr’blank’ | ‘default’ | ‘primary’ | ‘muted’ | ‘secondary’ | ‘accent’ | ‘destructive’ | ‘green’ | ‘red’ | ‘yellow’ | ‘blue’ | ‘indigo’ | ‘purple’ | ‘pink''default’Sets the button’s color scheme
outlinebooleanfalseWhen true, renders an outlined version of the button
ghostbooleanfalseWhen true, renders a minimal button with no border or background
fullbooleanfalseWhen true, makes the button take the full width of its container
roundedbooleanfalseWhen true, applies fully rounded corners (border-radius)
type”button” | “submit” | “reset""button”HTML button type attribute
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedContent of the button

The component also accepts all standard HTML button attributes.

Color Variants

The Button component offers multiple color schemes to support different visual hierarchies and semantic meanings in your interface.

Design Cue Colors

Standard buttons with colors based on design cue variables.

<div className="flex flex-wrap gap-4">
    <Button>Default</Button>
    <Button clr="primary">Primary</Button>
    <Button clr="secondary">Secondary</Button>
    <Button clr="accent">Accent</Button>
    <Button clr="destructive">Destructive</Button>
    <Button clr="muted">Muted</Button>
    <Button clr="blank">Blank</Button>
</div>

Color Variants

Base colors for buttons with specific color choices.

<div className="flex flex-wrap gap-4">
    <Button clr="green">Green</Button>
    <Button clr="red">Red</Button>
    <Button clr="yellow">Yellow</Button>
    <Button clr="blue">Blue</Button>
    <Button clr="indigo">Indigo</Button>
    <Button clr="purple">Purple</Button>
    <Button clr="pink">Pink</Button>
</div>

Outline Variants

All button colors offer outline variants.

<div className="flex flex-wrap gap-4">
    <Button outline>Default</Button>
    <Button clr="primary" outline>Primary</Button>
    <Button clr="accent" outline>Accent</Button>
    <Button clr="destructive" outline>Destructive</Button>
    <Button clr="blue" outline>Blue</Button>
    <Button clr="purple" outline>Purple</Button>
</div>

Style Variants

The Button component includes additional style options that can be combined with color variants.

Full Width

Makes the button take up 100% of the available width.

<div className="flex flex-wrap gap-4">
    <Button full>Full Width Button</Button>
</div>

Rounded

Applies fully rounded corners to the button.

<div className="flex flex-wrap gap-4">
    <Button rounded>Rounded Button</Button>
</div>

Ghost

Minimal styling with no border or background, ideal for icon buttons and subtle actions.

<div className="flex flex-wrap gap-4 items-center">
    <Button ghost>Default</Button>
    <Button clr="primary" ghost>Primary</Button>
    <Button clr="destructive" ghost>Delete</Button>
    <Button clr="destructive" ghost>
        <IconX />
    </Button>
</div>

Combined Variants

Variants can be combined for more specific styling:

<div className="flex flex-wrap gap-4">
    <Button clr="primary" outline rounded>Primary Outlined Rounded</Button>
</div>

Accessibility

The Button component follows accessibility best practices:

  • Uses the native HTML <button> element for proper semantics
  • Maintains proper focus styles for keyboard navigation
  • Includes appropriate color contrast ratios
  • Preserves the button’s type attribute for form submission control

When implementing buttons, ensure that:

  1. Button text clearly communicates the action that will occur
  2. Primary actions are visually distinct from secondary actions
  3. Destructive actions are appropriately styled to indicate caution

Examples

Basic Button

<Button>Click me</Button>

Submit Button in a Form

<Button type="submit" clr="primary">Submit Form</Button>

Button with Icon

<Button clr="primary">
  <IconArrowLeft />
  <span>Back</span>
</Button>

Destructive Action Button

<Button clr="destructive">Delete Account</Button>