Button

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.

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:

Prop	Type	Default	Description
clr	’blank’ | ‘default’ | ‘primary’ | ‘muted’ | ‘secondary’ | ‘accent’ | ‘destructive’ | ‘green’ | ‘red’ | ‘yellow’ | ‘blue’ | ‘indigo’ | ‘purple’ | ‘pink'	'default’	Sets the button’s color scheme
outline	boolean	false	When true, renders an outlined version of the button
full	boolean	false	When true, makes the button take the full width of its container
rounded	boolean	false	When true, applies fully rounded corners (border-radius)
type	”button” | “submit” | “reset"	"button”	HTML button type attribute
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the button

The component also accepts all standard HTML button attributes.

Design Cue Colors

Standard buttons with colors based on design cue variables.

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

Color Variants

Base colors for buttons with specific color choices.

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

Outline Variants

All button colors offer outline variants.

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

Full Width

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

<Button full>Full Width Button</Button>

Rounded

Applies fully rounded corners to the button.

<Button rounded>Rounded Button</Button>

Combined Variants

Variants can be combined for more specific styling:

<Button clr="primary" outline rounded>
  Primary Outlined Rounded
</Button>

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

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">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
  </svg>
  <span>Back</span>
</Button>

Destructive Action Button

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