Alert

Enhance user experience with Pillar UI's versatile React Alert component. Easily create customizable alert notifications for your React applications, with various styles, and options for user interaction.

Components:

Alert

Type

Components

import

import { Alert } from '@pillar-ui/core'
Go To alert Source CodeIssuesdiscussions

Usage

import { Alert } from '@pillar-ui/core'
<Alert title="Title" description="Description" icon={<AlertCircle />} />

Examples

Content

The Content is not a prop but we use it here to describe all the props related to the content of the alert.

  • title: The title of the alert.
  • message: The description of the alert.
  • icon: The icon of the alert.
import { Alert } from '@pillar-ui/core'
import { CircleCheck } from '@pillar-ui/icons'

export const AlertContent = () => {
  return (
    <>
      <Alert title="Success!" />
      <Alert icon={<CircleCheck width="30" />} title="Success!" />
      <Alert message="Success!" />
      <Alert title="Success!" message="Your prefered description" />
      <Alert icon={<CircleCheck width="30" />} title="Success!" message="Your prefered description" />
    </>
  )
}

Color

Default

d

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
import { Alert } from '@pillar-ui/core'

/* 
  this is the list of the color used in Pillar ui Library
  p => primary | se=> secondary | d => danger | w => warning | i => info | su=> success | b => bg 
*/
export const AlertColor = () => {
  return (
    <>
      <Alert title="Success!" color="d" />
      <Alert title="Success!" color="w" />
      <Alert title="Success!" color="su" />
      <Alert title="Success!" color="p" />
      <Alert title="Success!" color="b" />
      <Alert title="Success!" color="se" />
      <Alert title="Success!" color="i" />
    </>
  )
}

Size

Default

5

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Alert } from '@pillar-ui/core'

export const AlertSize = () => {
  return (
    <>
      <Alert title="Success!" size="1" />
      <Alert title="Success!" size="2" />
      <Alert title="Success!" size="3" />
      <Alert title="Success!" size="5" />
      <Alert title="Success!" size="6" />
      <Alert title="Success!" size="7" />
      <Alert title="Success!" size="8" />
      <Alert title="Success!" size="9" />
    </>
  )
}

Variant

Default

soft

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'
import { Alert } from '@pillar-ui/core'

export const AlertVariant = () => {
  return (
    <>
      <Alert variant="shadow" title="Hello world" />
      <Alert variant="solid" title="Hello world" />
      <Alert variant="mixed" title="Hello world" />
      <Alert variant="soft" title="Hello world" />
      <Alert variant="outline" title="Hello world" />
    </>
  )
}

Corner

Default

0

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'
import { Alert } from '@pillar-ui/core'

export const AlertCorner = () => {
  return (
    <>
      <Alert title="Success!" corner="0" />
      <Alert title="Success!" corner="1" />
      <Alert title="Success!" corner="2" />
      <Alert title="Success!" corner="3" />
      <Alert title="Success!" corner="3" />
      <Alert title="Success!" corner="4" />
      <Alert title="Success!" corner="5" />
      <Alert title="Success!" corner="full" />
    </>
  )
}

Icon

import { Alert } from '@pillar-ui/core'
import { CircleCheck } from '@pillar-ui/icons'

export const AlertIcon = () => {
  return (
    <>
      <Alert icon={<CircleCheck />} title="Success!" />
      <Alert icon={<CircleCheck width="24" />} title="Success!" />
      <Alert icon={<CircleCheck width="48" />} title="Success!" message="Your prefered description" />
    </>
  )
}

Closable

A boolean prop that determines whether the alert shows a close button. If set to true, the close button will be displayed.

Default

false

Type

boolean'
import { Alert } from '@pillar-ui/core'

export const AlertClosable = () => {
  return (
    <>
      <Alert closable title="Success!" />
      <Alert closable title="Success!" message="you have an error in the start of the program" />
      <Alert closable message="you have an error in the start of the program!" />
    </>
  )
}

Action

The action prop replace the standard close button on our alert with a custom one. This custom button allow us to add extra functionality. For example, we can add an onClick event which will trigger a specific action when clicked. This action can be combined with the default closing behavior of the alert, creating a more versatile and interactive experience

'use client'
import { Alert, Button } from '@pillar-ui/core'

export const AlertAction = () => {
  return (
    <>
      <Alert title="Success!" />
      <Alert closable title="Success!" message="you have an error in the start of the program" />
      <Alert
        action={
          <Button variant="mixed" color="d" size="3">
            Collapse
          </Button>
        }
        closable
        message="you have an error in the start of the program!"
      />
      <Alert
        action={
          <Button onClick={()=> alert('clicked')} color="d" size="3">
            Close
          </Button>
        }
        closable
        message="you have an error in the start of the program!"
      />
    </>
  )
}

Inline

Default

false

Type

boolean'
import { Alert } from '@pillar-ui/core'
import { CircleWarning } from '@pillar-ui/icons'

export const AlertInline = () => {
  return (
    <>
      <Alert title="hello" message="you have an error in the start of the program" inline />
      <Alert title="hello" message="you have an error in the start of the program" inline />
      <Alert
        title="hello"
        message="you have an error in the start of the program"
        inline
        icon={<CircleWarning width="20" />}
      />
    </>
  )
}

Controlled

A "controlled" alert means that you manage its visibility programmatically using React state. This approach gives you full control over when the alert should appear or disappear, making it ideal for scenarios like:

  • Hiding the alert after a specific duration (e.g., after 5 seconds).
  • Closing the alert in response to user interactions (e.g., after clicking a button or completing an action).
'use client'

import { Alert, Button, Flex } from '@pillar-ui/core'
import { useState } from 'react'

export const AlertControlled = () => {
  const [open, setOpen] = useState(true)

  function onClose() {
    setOpen((isOpen) => (isOpen ? false : true))
  }
  return (
    <Flex gap="4" direction="col">
      <Button onClick={onClose}>{open ? 'Hide' : 'Open'} The Alert</Button>
      <Alert title="Danger!" visible={open} onClose={onClose} closable />
    </Flex>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Alert */
--alert-rad:;
/* Change the default size of the Alert */
--alert-size:;

previous

Accordions

next

Avatar