Photonix

Alert

Displays a callout for user attention.

Preview

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

<Alert title="Info" message="Info message..." variant="info" />
<Alert title="Success" message="Success message..." variant="success" />
<Alert title="Warning" message="Warning message..." variant="warning" />
<Alert title="Error" message="Error message..." variant="error" />

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

Status

Alerts come in four standard variants: info, success, warning, and error.

Status
<Alert title="Success" message="Your changes have been saved successfully." variant="success" />
<Alert title="Warning" message="Please review your account settings." variant="warning" />
<Alert title="Error" message="Failed to connect to the server." variant="error" />
<Alert title="Info" message="A new software update is available." variant="info" />

Full Width vs Hug Content

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

Full Width vs Hug Content
<Alert message="Full Width (Default)" isFullWidth={true} />
<Alert message="Hug Content" isFullWidth={false} />

Closable

Alerts can include a close button.

Closable
<Alert
  message="This alert can be closed by clicking the X icon."
  variant="info"
  closable
  onClose={() => alert('Closed!')}
/>

On this page

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