Alert

Alert is a component to display contextual messages such as information, success, warning and error messages.

Import

Alert Component exports:

Alert: The alert component itself, to be called as JSX element <Alert {...props}>{text}<Alert>
defaultAlertElementClass: A function that generate default element class applied to Alert component
tailwindAlertElementClass: A function that generate Tailwindcss element class for Alert component

import {
  Alert,
  defaultAlertElementClass,
  tailwindAlertElementClass
} from '@paradise-ui/react'

// For standalone installation
import {
  Alert,
  defaultAlertElementClass,
  tailwindAlertElementClass
} from '@paradise-ui/alert'

Usage

When using Alert without any prop, it will render Alert with subtle variant, primary type and closable false

Lorem ipsum dolor sit amet

<Alert>Lorem ipsum dolor sit amet</Alert>

Variants

Alert component comes with 4 variants: subtle, solid, outlined, left-bordered

Lorem ipsum dolor sit amet

<div class="flex flex-col gap-4">
  <Alert variant='subtle'>Lorem ipsum dolor sit amet</Alert>
  <Alert variant='solid'>Lorem ipsum dolor sit amet</Alert>
  <Alert variant='outlined'>Lorem ipsum dolor sit amet</Alert>
  <Alert variant='left-bordered'>Lorem ipsum dolor sit amet</Alert>
</div>

Types

Alert component also comes with 5 types: info, success, warning, error

Lorem ipsum dolor sit amet

<div class="flex flex-col gap-4">
  <Alert type='info'>Lorem ipsum dolor sit amet</Alert>
  <Alert type='success'>Lorem ipsum dolor sit amet</Alert>
  <Alert type='warning'>Lorem ipsum dolor sit amet</Alert>
  <Alert type='error'>Lorem ipsum dolor sit amet</Alert>
</div>

Closable

You can also set Alert component to be closable

Lorem ipsum dolor sit amet

<Alert closeable>Lorem ipsum dolor sit amet</Alert>

Customize Usage

Customize your Alert and copy the generated code with the panel below.

Alert

Import​

Usage​

Variants​

Types​

Closable​

Customize Usage​

Import

Usage

Variants

Types

Closable

Customize Usage