Pallas UI
DocsComponents
Core Concepts
Previews

Alert

Displays a callout for user attention.

Installation

Copy and paste the following code into your project

import { styled } from '@styled-system/jsx'
import { alert, alertDescription, alertTitle } from '@styled-system/recipes'
import * as React from 'react'
 
const BaseAlert = (
  props: React.HTMLAttributes<HTMLDivElement>,
  ref: React.ForwardedRef<HTMLDivElement>,
) => <div ref={ref} {...props} role="alert" />
 
export const Alert = styled(
  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(BaseAlert),
  alert,
)
export const AlertTitle = styled('h5', alertTitle)
export const AlertDescription = styled('div', alertDescription)

Update the import paths to match your project setup

Usage

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Terminal } from 'lucide-react' // Any icon of your choice
import { icon } from '@styled-system/recipes'
<Alert>
  <Terminal className={icon()} />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Default

Info

Error

Warning