diff --git a/app/View/Enums/Variant.php b/app/View/Enums/Variant.php
new file mode 100644
index 00000000..121d284f
--- /dev/null
+++ b/app/View/Enums/Variant.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\View\Enums;
+
+enum Variant: string
+{
+
+    case PRIMARY = 'primary';
+    case SECONDARY = 'secondary';
+    case PRIMARYLIGHT = 'primary-light';
+    case WARNING = 'warning';
+    case INFO = 'info';
+    case DANGER = 'danger';
+
+    public function foreground(): string
+    {
+        return match ($this) {
+            self::PRIMARY => 'text-primary-300',
+            self::SECONDARY => 'text-primary-400',
+            self::PRIMARYLIGHT => 'text-primary-200',
+            self::WARNING => 'text-yellow-300',
+            self::INFO => 'text-blue-300',
+            self::DANGER => 'text-red-100',
+        };
+    }
+
+    public function background(): string
+    {
+        return match ($this) {
+            self::PRIMARY => 'bg-primary-700',
+            self::SECONDARY => 'bg-primary-800',
+            self::PRIMARYLIGHT => 'bg-primary-600',
+            self::WARNING => 'bg-yellow-700',
+            self::INFO => 'bg-blue-700',
+            self::DANGER => 'bg-red-400',
+        };
+    }
+
+    public function hoverForeground(): string
+    {
+        return match ($this) {
+            self::PRIMARY => 'hover:text-primary-100',
+            self::SECONDARY => 'hover:text-primary-200',
+            self::PRIMARYLIGHT => 'hover:text-primary-100',
+            self::WARNING => 'hover:text-yellow-100',
+            self::INFO => 'hover:text-blue-100',
+            self::DANGER => 'hover:text-red-100',
+        };
+    }
+
+    public function hoverBackground(): string
+    {
+        return match ($this) {
+            self::PRIMARY => 'hover:bg-primary-500',
+            self::SECONDARY => 'hover:bg-primary-600',
+            self::PRIMARYLIGHT => 'hover:bg-primary-500',
+            self::WARNING => 'hover:bg-yellow-500',
+            self::INFO => 'hover:bg-blue-500',
+            self::DANGER => 'hover:bg-red-500',
+        };
+    }
+
+    public static function fromString(string $input): self
+    {
+        return collect(static::cases())
+            ->first(fn ($variant) => $variant->value === $input);
+    }
+}
diff --git a/app/View/Traits/HasColors.php b/app/View/Traits/HasColors.php
new file mode 100644
index 00000000..e35e30f2
--- /dev/null
+++ b/app/View/Traits/HasColors.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Traits;
+
+use App\View\Enums\Variant;
+
+trait HasColors
+{
+    public function bgColor(string $variant): string
+    {
+        $variant = Variant::fromString($variant);
+
+        return implode(' ', [
+            $variant->background(),
+            $variant->hoverBackground(),
+        ]);
+    }
+
+    public function fgColor(string $variant): string
+    {
+        $variant = Variant::fromString($variant);
+
+        return implode(' ', [
+            $variant->foreground(),
+            $variant->hoverForeground(),
+        ]);
+    }
+
+    public function allColors(string $variant): string
+    {
+        return "{$this->bgColor($variant)} {$this->fgColor($variant)}";
+    }
+}
diff --git a/app/View/Ui/Action.php b/app/View/Ui/Action.php
new file mode 100644
index 00000000..40ce1728
--- /dev/null
+++ b/app/View/Ui/Action.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Ui;
+
+use App\View\Traits\HasColors;
+use Illuminate\View\Component;
+
+class Action extends Component
+{
+
+    use HasColors;
+
+    public function __construct(
+        public string $icon,
+        public string $variant = 'primary'
+    ) {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <a v-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="inline-flex
+                w-6 h-5 flex items-center justify-center rounded {{ $allColors($variant) }}
+            ">
+                <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
+            </a>
+        HTML;
+    }
+}