Action

A flexible container component for icons with multiple color variants, sizes, and optional borders.

Usage

Basic Action

import { Action } from "@prisma-docs/eclipse";
import { Command } from "lucide-react";

export function BasicAction() {
  return (
    <Action color="neutral" size="lg">
      <Command />
    </Action>
  );
}

Live Example:

Color Variants

The Action component supports multiple color variants:

import { Action } from "@prisma-docs/eclipse";
import { Command } from "lucide-react";

export function ColorVariants() {
  return (
    <div className="flex flex-wrap gap-4">
      <Action color="ppg" size="2xl">
        <Command />
      </Action>
      <Action color="orm" size="2xl">
        <Command />
      </Action>
      <Action color="error" size="2xl">
        <Command />
      </Action>
      <Action color="success" size="2xl">
        <Command />
      </Action>
      <Action color="warning" size="2xl">
        <Command />
      </Action>
      <Action color="neutral" size="2xl">
        <Command />
      </Action>
    </div>
  );
}

Live Example:

Extended Color Palette

Additional color options for more variety:

import { Action } from "@prisma-docs/eclipse";
import { Heart, Star, Zap } from "lucide-react";

export function ExtendedColors() {
  return (
    <div className="flex flex-wrap gap-4">
      <Action color="cyan" size="2xl">
        <Heart />
      </Action>
      <Action color="fuchsia" size="2xl">
        <Star />
      </Action>
      <Action color="lime" size="2xl">
        <Zap />
      </Action>
      <Action color="pink" size="2xl">
        <Heart />
      </Action>
      <Action color="purple" size="2xl">
        <Star />
      </Action>
      <Action color="sky" size="2xl">
        <Zap />
      </Action>
      <Action color="violet" size="2xl">
        <Heart />
      </Action>
      <Action color="yellow" size="2xl">
        <Star />
      </Action>
    </div>
  );
}

Live Example:

Size Variants

The Action component comes in four sizes:

import { Action } from "@prisma-docs/eclipse";
import { Command } from "lucide-react";

export function SizeVariants() {
  return (
    <div className="flex items-center gap-4">
      <Action color="ppg" size="lg">
        <Command className="h-full w-full" />
      </Action>
      <Action color="ppg" size="2xl">
        <Command className="h-full w-full" />
      </Action>
      <Action color="ppg" size="4xl">
        <Command className="h-full w-full" />
      </Action>
      <Action color="ppg" size="5xl">
        <Command className="h-full w-full" />
      </Action>
    </div>
  );
}

Live Example:

Framed Variant

Add a border to the Action container with the isFramed prop:

import { Action } from "@prisma-docs/eclipse";
import { Command } from "lucide-react";

export function FramedAction() {
  return (
    <div className="flex flex-wrap gap-4">
      <Action color="ppg" size="2xl" isFramed>
        <Command />
      </Action>
      <Action color="orm" size="2xl" isFramed>
        <Command />
      </Action>
      <Action color="error" size="2xl" isFramed>
        <Command />
      </Action>
      <Action color="success" size="2xl" isFramed>
        <Command />
      </Action>
      <Action color="warning" size="2xl" isFramed>
        <Command />
      </Action>
      <Action color="neutral" size="2xl" isFramed>
        <Command />
      </Action>
    </div>
  );
}

Live Example:

With Different Icons

Use any icon library like Lucide React:

import { Action } from "@prisma-docs/eclipse";
import { CheckCircle, AlertTriangle, Info, Zap } from "lucide-react";

export function DifferentIcons() {
  return (
    <div className="flex flex-wrap gap-4">
      <Action color="success" size="2xl">
        <CheckCircle />
      </Action>
      <Action color="warning" size="2xl">
        <AlertTriangle />
      </Action>
      <Action color="ppg" size="2xl">
        <Info />
      </Action>
      <Action color="error" size="2xl">
        <Zap />
      </Action>
    </div>
  );
}

Live Example:

Component Props

Action

color - Color variant ("ppg" | "orm" | "error" | "success" | "warning" | "cyan" | "fuchsia" | "lime" | "pink" | "purple" | "sky" | "violet" | "yellow" | "neutral" | "neutral-reversed", default: "neutral")
size - Size variant ("lg" | "2xl" | "4xl" | "5xl", default: "lg")
isFramed - Whether to show a border (boolean, default: false)
className - Additional CSS classes (string, optional)
children - Icon or content to display (React.ReactNode)
All standard HTML div attributes

Sizes Reference

lg: 28×28px (7rem) with 6px padding
2xl: 36×36px (9rem) with 8px padding
4xl: 48×48px (12rem) with 12px padding
5xl: 64×64px (16rem) with 16px padding

Features

✅ 15 color variants for different use cases
✅ 4 size options from small to extra large
✅ Optional border with matching colors
✅ Perfect for icon containers
✅ Flexbox centered content
✅ Fully typed with TypeScript
✅ Customizable with className prop
✅ Works with any icon library

Best Practices

Use semantic colors (success for positive actions, error for destructive)
Use isFramed to add emphasis or distinguish from background
Keep icons simple and recognizable at smaller sizes
Consider using consistent sizes throughout your UI
Combine with buttons or interactive elements for actions
Use neutral colors for less important or decorative icons

Common Use Cases

The Action component is perfect for:

Status indicators - Show state with colored backgrounds
Feature highlights - Draw attention to key features
Avatars - Alternative to image-based avatars
Badges - Highlight counts or notifications
Decorative elements - Add visual interest to layouts
Cards - Icon headers for content cards
Lists - Visual markers for list items

Accessibility

The Action component follows accessibility best practices:

Uses semantic HTML div element
Content is properly centered for screen readers
Supports all ARIA attributes
Can be made interactive with role and tabindex
Works with keyboard navigation when used as button
Respects user color preferences
High contrast between background and content

Styling

The Action component uses design tokens:

Backgrounds: Various bg-background-* tokens
Borders: Matching border-stroke-* tokens
Radius: rounded-square (6px)
Flexbox: Centered content with items-center justify-center

Customize by passing className:

<Action className="shadow-lg hover:scale-110 transition-transform" color="ppg" size="2xl">
  <Command className="h-5 w-5" />
</Action>

Action

On this page