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 leverages CSS variables to define default styles for all components. This approach ensures consistency and flexibility throughout your project. By customizing these variables, you can effortlessly adjust the overall look and feel of your components without repeating yourself.

Available Properties:

/* 
 * Change the default corner radius of the Alert.
 * Default: 0 
 */
--alert-radius: 0;

/* 
 * Change the default size of the Alert.
 * Default: var(--F5)
 */
--alert-size: var(--F5);

/* 
 * Change the default padding of the Alert.
 * Default: 0.5em 1em  
 *
 * PLEASE IF YOU LIKE THE PADDING TO BE DEPEND
 * ON THE SIZE PLEASE TRY TO USE em INSTEAD OF
 * OTHER UNITS 
 */
--alert-padding: 0.5em 1em;

previous

Accordions

next

Avatar