Alert

TS

import { … } from "@fungi.computer/caps/components/alert";

Hero

TSX

import { Alert } from "@fungi.computer/caps/components/alert";

export default function Hero() {
  return (
    <Alert
      title="Saved to the spore log"
      tone="success"
      description="Your chanterelle patch is now on the map."
    />
  );
}

Tones

TSX

import { Alert } from "@fungi.computer/caps/components/alert";

export default function Tones() {
  return (
    <div className="grid max-w-sm gap-sm">
      <Alert tone="info" title="Heads up" description="Rain is coming in." />
      <Alert
        tone="warning"
        title="Low on jars"
        description="Only two left for the harvest."
      />
      <Alert
        tone="error"
        title="Patch lost"
        description="Someone cleared the hollow."
      />
    </div>
  );
}

With action

TSX

import { Alert } from "@fungi.computer/caps/components/alert";
import { IconButton } from "@fungi.computer/caps/components/icon-button";

export default function WithAction() {
  return (
    <Alert
      tone="error"
      title="Couldn't upload photo"
      description="Connection interrupted. Your original file is safe."
      action={
        <IconButton
          aria-label="Dismiss"
          icon={
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
              <path d="M4 4l8 8M12 4l-8 8" strokeWidth="1.5" />
            </svg>
          }
        />
      }
    />
  );
}

Props

AlertProps

Prop	Type	Description
action?	ReactNode
description?	ReactNode
title?	ReactNode
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

• action?ReactNode
• description?ReactNode
• title?ReactNode
• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

Full types: API reference.