Alert

An alert component for displaying important messages with different severity levels. Supports multiple colours (error, success, warning, info, default), optional descriptions, custom icons, and dismissal functionality.

Installation

import { Alert } from '@geckoui/geckoui';

Basic Usage

This is an alert message

<Alert title="This is an alert message" />

Props API

Prop	Type	Default	Description
`title`	`ReactNode \| FC`	-	Main message (required)
`color`	`'error' \| 'success' \| 'warning' \| 'info' \| 'default'`	`'default'`	What the alert means. Named `color` to match `Button` and `Badge`
`description`	`ReactNode \| FC`	-	Additional detailed text
`condensed`	`boolean`	`false`	Reduced vertical padding
`onRemove`	`() => void`	-	Callback for dismiss button
`icon`	`ReactNode \| FC`	-	Custom icon element
`iconClassName`	`string`	-	CSS class for default icon
`className`	`string`	-	CSS class for container

Examples

Variants

Default alert

Error alert

Success alert

Warning alert

Info alert

<Alert color="default" title="Default alert" />
<Alert color="error" title="Error alert" />
<Alert color="success" title="Success alert" />
<Alert color="warning" title="Warning alert" />
<Alert color="info" title="Info alert" />

With Description

Payment failed

Your payment could not be processed. Please try again or contact support.

Account created

Welcome! Your account has been successfully created and is ready to use.

<Alert
  color="error"
  title="Payment failed"
  description="Your payment could not be processed. Please try again or contact support."
/>

<Alert
  color="success"
  title="Account created"
  description="Welcome! Your account has been successfully created and is ready to use."
/>

Dismissible Alert

Storage almost full

You're using 95% of your storage. Upgrade your plan to avoid interruptions.

function DismissibleAlert() {
  const [show, setShow] = useState(true);

  if (!show) {
    return (
      <Button size="sm" onClick={() => setShow(true)}>
        Show Alert Again
      </Button>
    );
  }

  return (
    <Alert
      color="warning"
      title="Storage almost full"
      description="You're using 95% of your storage. Upgrade your plan to avoid interruptions."
      onRemove={() => setShow(false)}
    />
  );
}

Condensed Style

Changes saved successfully

2 new messages

<Alert color="success" condensed title="Changes saved successfully" />
<Alert color="info" condensed title="2 new messages" />

With Custom Icon

🎉New feature available

Check out our latest feature in the settings panel.

import { RocketIcon } from 'lucide-react';

<Alert
  color="info"
  title="New feature available"
  description="Check out our latest feature in the settings panel."
  icon={<RocketIcon className="w-5 h-5" />}
/>

Form Validation Errors

Form validation failed

Please fix the following errors before submitting:

Email is required
Password must be at least 8 characters
Terms of service must be accepted

<Alert
  color="error"
  title="Form validation failed"
  description="Please fix the errors before submitting."
/>

Status Messages

Your session will expire in 5 minutes

Background sync in progress

All systems operational

<Alert
  color="info"
  condensed
  title="Your session will expire in 5 minutes"
/>

<Alert
  color="warning"
  condensed
  title="Background sync in progress"
/>

<Alert
  color="success"
  condensed
  title="All systems operational"
/>

Behavior

Dismiss Button

When onRemove callback is provided, a close button appears in the top-right corner. Clicking it triggers the callback:

<Alert
  title="Dismissible alert"
  onRemove={() => {
    console.log('Alert dismissed');
    // Hide alert or perform cleanup
  }}
/>

Condensed Mode

The condensed prop reduces vertical padding for a more compact appearance, ideal for inline notifications:

<Alert condensed title="Compact notification" />

Module Augmentation

The Alert component supports TypeScript module augmentation, allowing you to add custom colours with full type safety.

Live Example

A custom critical colour created using module augmentation:

Error alert

Warning alert

Critical alert (custom variant)

Step 1: TypeScript Declaration

Create a declaration file (e.g., gecko.d.ts) in your project:

import "@geckoui/geckoui";

declare module "@geckoui/geckoui" {
  interface AlertColorMap {
    critical: unknown;
  }
}

Step 2: Add CSS Styles

Add the corresponding styles to your global CSS/SCSS file. You need to define both the container colour and the icon styling:

.GeckoUIAlert {
  &[data-color="critical"] {
    @apply text-purple-600;
  }

  &__icon[data-color="critical"] {
    @apply bg-purple-600;

    mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="currentColor"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="currentColor"/></svg>');
  }
}

Step 3: Use Your Custom Variant

<Alert color="critical" title="Critical system alert" />

Accessibility

Uses semantic HTML with proper ARIA roles
Dismiss button is keyboard accessible
Color-coded icons indicate severity
Works with screen readers
Icon provides visual reinforcement of message type

Styling

The component uses data-* attributes for state and colour styling:

data-color — Colour (error, warning, info, success, default)
data-condensed — Present when condensed mode is enabled

BEM class names for structural elements:

GeckoUIAlert — Main container
GeckoUIAlert__body — Content wrapper
GeckoUIAlert__icon — Icon element
GeckoUIAlert__title — Title text
GeckoUIAlert__description — Description text
GeckoUIAlert__remove-button — Dismiss button
GeckoUIAlert__remove-button__icon — Dismiss button icon

Styling with CSS

Alert reads the shared semantic tokens, so changing one updates every component that reports status, Toast included:

:root {
  --color-error: oklch(0.6 0.22 25);
  --color-warning: oklch(0.7 0.16 60);
  --color-info: oklch(0.62 0.19 260);
  --color-success: oklch(0.65 0.18 150);
}

The alert itself exposes its own variables:

Variable	Default	Applies to
`--gecko-alert-bg`	`--color-surface-primary`	Background
`--gecko-alert-border`	`--color-border-primary`	Border colour
`--gecko-alert-accent`	per colour	Title text and icon
`--gecko-alert-radius`	`0.5rem`	Corner radius

Scope a variable to one colour to restyle only that one:

.GeckoUIAlert[data-color="error"] {
  --gecko-alert-bg: var(--color-error);
  --gecko-alert-accent: white;
}

InputError - Form field error messages
ConfirmDialog - Confirmation prompts
Tooltip - Contextual hints

Alert

On this page