A versatile alert component with customizable icons and actions.
Installation
Usage
import { Alert } from "viora-ui";import { Alert } from "viora-ui";
export default function AlertDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<Alert />
</div>
);
}API Reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | "" | Additional CSS classes for custom styling. |
| close? | boolean | false | Configuration for close. |
| children? | React.ReactNode | - | Content or child elements to render. |
AlertIcon
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content or child elements to render. |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content or child elements to render. |
AlertToolbar
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content or child elements to render. |
Button
| Prop | Type | Default | Description |
|---|---|---|---|
| variant? | 'primary' | 'inverse' | 'outline' | - | Visual style variant. |
| mode? | 'default' | 'link' | - | Configuration for mode. |
| underlined? | 'none' | 'solid' | - | Configuration for underlined. |
| size? | 'sm' | 'md' | 'lg' | - | Size option for the component. |
| className? | string | "" | Additional CSS classes for custom styling. |
| children | React.ReactNode | - | Content or child elements to render. |
Built by Otis
Last updated: 9/13/2026