Photonix

Alert

Displays a callout for user attention.

Preview

Usage
"use client";

import { Alert } from '@photonix/ultimate';

export default function AlertPreviewExample() {
    return <Alert variant="info" title="Heads up" message="A new software update is available." />;
}

Component API

Alert

Prop
Type
Default
Description
variant
"success" | "error" | "warning" | "info"
'info'
Variant type of the alert - success: Green checkmark icon - error: Red error icon - warning: Orange warning icon - info: Blue info icon
title
string
-
Optional title (bold text)
message
string
-
Message content (required)
closable
boolean
false
Show close button
isFullWidth
boolean
true
Makes alert take full width of container (default: true) Set to false for hug content mode
onClose
(() => void)
-
Callback when close button is clicked

Variants

Alert Variants

Alert examples keep variant, title, message, width, and close affordance in the same source.

Alert Variants
"use client";

import { Alert, Stack } from '@photonix/ultimate';

export default function AlertVariantsExample() {
    return (
        <Stack gap="md">
            <Alert variant="info" title="Info" message="A new software update is available." />
            <Alert variant="success" title="Success" message="Your changes have been saved successfully." />
            <Alert variant="warning" title="Warning" message="Please review your account settings." />
            <Alert variant="error" title="Error" message="Failed to connect to the server." />
        </Stack>
    );
}

Full Width vs Hug Content

Alerts take full width by default but can be set to hug content.

Full Width vs Hug Content
"use client";

import { Alert, Stack } from '@photonix/ultimate';

export default function AlertWidthExample() {
    return (
        <Stack gap="md" align="start">
            <Alert message="Full Width (Default)" isFullWidth={true} />
            <Alert message="Hug Content" isFullWidth={false} />
        </Stack>
    );
}

Closable

Alerts can include a close button.

Closable
"use client";

import { Alert, Stack } from '@photonix/ultimate';

export default function AlertClosableExample() {
    return (
        <Stack gap="md" w="100%">
            <Alert
                message="This alert can be closed by clicking the X icon."
                variant="info"
                closable
                onClose={() => undefined}
            />
        </Stack>
    );
}

On this page

Preview
Component API
Variants
Status
Width
Closable
Photonix UI - React Components, Templates & Figma Design System