Buttons

The Button component provides various styles and sizes using class-variance-authority (cva) for variants and leverages global CSS for base styles.

Primary Buttons (Default Variant)

Secondary Buttons

Transparent Buttons

Link Buttons

Implementation Notes

Component Structure

The Button component uses cva (class-variance-authority) to manage different visual styles and sizes. Base styles are defined in globals.css under the .btn class.

Available Variants

Use “primary” for main actions, “secondary” for supporting actions.

Available Sizes

sm - Small buttons for compact interfaces
default - Standard button size
lg - Large buttons for emphasis
iconOnlySm - 40x40px icon-only buttons

Icon Support

Pass Material Symbols icon names to the icon prop. Control position with iconPosition="left" (default) or iconPosition="right". For icon-only buttons, provide an aria-label for accessibility.

Usage Examples

<Button variant="primary" icon="save">
  Save Changes
</Button>

<Button variant="secondary" size="sm" icon="cancel">
  Cancel
</Button>

<Button 
  variant="transparent" 
  size="iconOnlySm" 
  icon="edit" 
  aria-label="Edit item"
/>