Alert | Park UI

This is a title

Installation

npx @park-ui/cli@next add alert

Add Component

Copy the code snippet below into you components folder.

'use client'
import { ark } from '@ark-ui/react/factory'
import { InfoIcon } from 'lucide-react'
import { type ComponentProps, forwardRef } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { alert } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(alert)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(ark.div, 'root')
export const Title = withContext(ark.h3, 'title')
export const Description = withContext(ark.div, 'description')
export const Content = withContext(ark.div, 'content')

type IndicatorProps = ComponentProps<typeof StyledIndicator>
const StyledIndicator = withContext(ark.span, 'indicator')

export const Indicator = forwardRef<HTMLSpanElement, IndicatorProps>(
  function Indicator(props, ref) {
    return (
      <StyledIndicator ref={ref} {...props}>
        <InfoIcon />
      </StyledIndicator>
    )
  },
)

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineSlotRecipe } from '@pandacss/dev'

export const alert = defineSlotRecipe({
  className: 'alert',
  slots: ['root', 'content', 'description', 'indicator', 'title'],
  base: {
    root: {
      alignItems: 'flex-start',
      borderRadius: 'l3',
      display: 'flex',
      position: 'relative',
      width: 'full',
    },
    content: {
      display: 'flex',
      flex: '1',
      flexDirection: 'column',
      gap: '1',
    },
    description: {
      display: 'inline',
    },
    indicator: {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: '0',
    },
    title: {
      fontWeight: 'semibold',
    },
  },
  defaultVariants: {
    size: 'md',
    status: 'info',
    variant: 'subtle',
  },
  variants: {
    size: {
      md: {
        root: {
          gap: '3',
          p: '4',
          textStyle: 'sm',
        },
        indicator: {
          _icon: {
            width: '5',
            height: '5',
          },
        },
      },
      lg: {
        root: {
          gap: '4',
          p: '4',
          textStyle: 'md',
        },
        indicator: {
          _icon: {
            width: '6',
            height: '6',
          },
        },
      },
    },
    variant: {
      solid: {
        root: {
          bg: 'colorPalette.solid.bg',
          color: 'colorPalette.solid.fg',
        },
      },
      surface: {
        root: {
          bg: 'colorPalette.surface.bg',
          borderWidth: '1px',
          borderColor: 'colorPalette.surface.border',
          color: 'colorPalette.surface.fg',
        },
      },
      subtle: {
        root: {
          bg: 'colorPalette.subtle.bg',
          color: 'colorPalette.subtle.fg',
        },
      },
      outline: {
        root: {
          borderWidth: '1px',
          borderColor: 'colorPalette.outline.border',
          color: 'colorPalette.outline.fg',
        },
      },
    },
    status: {
      info: {
        root: { colorPalette: 'blue' },
      },
      warning: {
        root: { colorPalette: 'orange' },
      },
      success: {
        root: { colorPalette: 'green' },
      },
      error: {
        root: { colorPalette: 'red' },
      },
      neutral: {},
    },
  },
})

Usage

import { Alert } from '@/components/ui'

<Alert.Root>
  <Alert.Indicator />
  <Alert.Content>
    <Alert.Title />
    <Alert.Description />
  </Alert.Content>
</Alert.Root>

Examples

Description

Render the Alert.Description component to provide additional context to the alert.

This is a title

This is a description

Status

Change the status of the alerts by passing the status prop. This affects the color scheme and icon used.

This is a title

This is a description

This is a title

This is a description

This is a title

This is a description

This is a title

This is a description

This is a title

This is a description

Variants

Use the variant prop to change the visual style of the alert.

This is a title

This is a description

This is a title

This is a description

This is a title

This is a description

This is a title

This is a description

Sizes

Use the size prop to change the size of the alert.

This is a title

This is a description

This is a title

This is a description

Closable

Here's an example of how to compose the Alert with a close button.

This is a title

This is a description

Closed Component

Here's an example of a closed alert that can be opened with a button.

import { forwardRef, type ReactElement, type ReactNode } from 'react'
import { Alert as StyledAlert } from '@/components/ui'

export interface AlertProps extends Omit<StyledAlert.RootProps, 'title'> {
  startElement?: ReactNode
  endElement?: ReactNode
  title?: ReactNode
  icon?: ReactElement
}

export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
  const { title, children, icon, startElement, endElement, ...rest } = props
  return (
    <StyledAlert.Root ref={ref} {...rest}>
      {startElement || <StyledAlert.Indicator>{icon}</StyledAlert.Indicator>}
      {children ? (
        <StyledAlert.Content>
          <StyledAlert.Title>{title}</StyledAlert.Title>
          <StyledAlert.Description>{children}</StyledAlert.Description>
        </StyledAlert.Content>
      ) : (
        <StyledAlert.Title flex="1">{title}</StyledAlert.Title>
      )}
      {endElement}
    </StyledAlert.Root>
  )
})

Props

Prop	Default	Type
`size`	`'md'`	`'md' \| 'lg'`
`variant`	`'subtle'`	`'solid' \| 'surface' \| 'subtle' \| 'outline'`
`status`	`'info'`	`'info' \| 'warning' \| 'success' \| 'error' \| 'neutral'`