Alert

Use Alert for status or feedback blocks.

Quick Preview

Heads up

This is a default alert.

Success

Data has been saved.

Warning

Please review required fields.

Danger

Unable to process request.

Preset Examples

Code

<Alert variant="default" title="Info" description="A neutral informational message." />
<Alert variant="success" title="Saved" description="Your profile has been updated." />
<Alert variant="warning" title="Low balance" description="Please top up your credits." />
<Alert variant="danger" title="Error" description="Something went wrong. Try again." />

Interactive Playground

Heads up

This is an alert message.

Code

import { Alert } from "@altech-ui/react";

export function Example() {
  return (
    <Alert
      variant="default"
      title="Heads up"
      description="This is an alert message."
    />
  );
}

Usage

Code

import { Alert } from "@altech-ui/react"
 
<Alert title="Heads up" description="This is a default alert." />
<Alert variant="success" title="Success" description="Data has been saved." />
<Alert variant="warning" title="Warning" description="Please review required fields." />
<Alert variant="danger" title="Danger" description="Unable to process request." />

Props

variant: default | success | warning | danger
title?: string
description?: string
Native div props