Primitives Overview

Primitive components are the foundation building blocks of the Acrobi Design System. These simple, focused components handle core functionality and can be composed together to create more complex interfaces.

Interactive Components

Button

Primary action component with multiple variants and sizes.

<Button variant="default" size="md">Click me</Button>
<Button variant="outline">Secondary</Button>
<Button variant="ghost">Subtle</Button>

Switch

Toggle control for binary choices.

<Switch checked={enabled} onCheckedChange={setEnabled} />

Checkbox

Multi-selection input control.

<Checkbox checked={selected} onCheckedChange={setSelected} />

Typography Components

Headline

Primary heading component with semantic levels.

<Headline level={1}>Main Title</Headline>
<Headline level={2}>Section Title</Headline>

Paragraph

Body text component with size variants.

<Paragraph size="lg">Large body text</Paragraph>
<Paragraph>Default body text</Paragraph>

Label

Form label component with required indicators.

<Label htmlFor="email" required>Email Address</Label>

Layout Components

Card

Container component for grouping related content.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
</Card>

Avatar

User profile image with fallback support.

<Avatar src="/avatar.jpg" fallback="JD" />

Badge

Status indicator with color variants.

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>

Form Components

Input

Basic text input with validation states.

<Input placeholder="Enter text" />
<Input error="This field is required" />

Dialog

Modal overlay for important interactions.

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>
    <DialogTitle>Confirm Action</DialogTitle>
    <DialogDescription>
      Are you sure you want to continue?
    </DialogDescription>
  </DialogContent>
</Dialog>

Navigation Components

Tooltip

Contextual information overlay.

<Tooltip content="Additional information">
  <Button>Hover me</Button>
</Tooltip>

Chip

Compact element for tags and filters.

<Chip>Tag</Chip>
<Chip variant="outlined">Filter</Chip>

Design Principles

Primitive components follow these key principles:

1. Single Responsibility - Each component has one clear purpose
2. Composability - Can be combined to create complex interfaces
3. Accessibility - Built-in WCAG 2.1 AA compliance
4. Consistency - Shared design tokens and patterns
5. Flexibility - Customizable through props and CSS

Usage Guidelines

• Use primitives as building blocks for custom components
• Combine multiple primitives to create application-specific interfaces
• Prefer structures over primitives for common patterns
• Maintain consistent spacing and typography scales

Next Steps

• View all primitive components
• Learn about structures
• See examples