Alert

Inline tone messaging — the stationary sibling of a toast.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Alert, Button } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Alert tone="info" title="Fine-tune queued">
        Training starts once a GPU frees up.
      </Alert>
      <Alert tone="success" title="Deployed to production" />
      <Alert
        tone="warn"
        title="Rate limited"
        action={<Button size="sm" variant="secondary">Retry now</Button>}
      >
        Requests are being throttled. Retrying in 30 seconds.
      </Alert>
      <Alert tone="danger" title="Run failed" onDismiss={() => {}}>
        The evaluation exited with code 1.
      </Alert>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia