Alert

Usage

import { Alert } from '@pillar-ui/core'
function(){
    return(
        <Alert
            color="suc"
            size="md"
            corner="rounded"
            title="Success!"
            message="Your action was successful."
            variant="filled"
            inline={false}
            icon={<CheckCircleIcon />}
            closable={true}
        />
        ;
    )
}

Props

The Alert component accepts the following props:

Color

Type: string
Default: primary
Options: danger | warning | success | primary | secondary | bg

The color prop determines the background color of the Alert. It accepts any of the Color types defined in our library see options above. If not provided, it defaults to the primary color.

Example usage:

Success!

function AlertColors(){
    return(
        <Alert title="Success!" color="dan" />
        <Alert title="Success!" color="war" />
        <Alert title="Success!" color="suc" />
        <Alert title="Success!" color="pri" />
        <Alert title="Success!" color='bg' />
        <Alert title="Success!" color="sec" />
    )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop determines the size of the Alert. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.

Example usage:

Success!

function AlerSizes(){
    return(
        <Alert title="Success!" size='3xs' />
        <Alert title="Success!" size='2xs' />
        <Alert title="Success!" size='xs' />
        <Alert title="Success!" size='md' />
        <Alert title="Success!" size='lg' />
        <Alert title="Success!" size='xl' />
        <Alert title="Success!" size='2xl' />
        <Alert title="Success!" size='3xl' />
    )
}

Variant

The variant prop determines the visual style of the alert. The following are the descriptions of the different variants:

Type: string Default: solid Options: solid | outline | soft | mixed

Danger Here

export const AlertVariant = () => {
  return (
    <Flex direction="column" gap="sm">
      <AlertBase variant="solid" />
      <AlertBase variant="outline" />
      <AlertBase variant="soft" />
      <AlertBase variant="mixed" />
    </Flex>
  )
}

Corner

Type: string Default: md Options: sharp | xs | sm | md | lg | circle | full The size prop determines the size of the Alert. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.

The corner prop determines the border radius of the Alert. It accepts any of the Corner types defined in your library, including (square, xs, sm, md, xl, full, circle), and pill. If not provided, it defaults to the square corner.

Example usage:

Success!

function AlerCorners(){
    return(
        <Alert title="Success!" corner='sharp' />
        <Alert title="Success!" corner='xs' />
        <Alert title="Success!" corner='md' />
        <Alert title="Success!" corner='lg' />
        <Alert title="Success!" corner='xl' />
        <Alert title="Success!" corner='circle' />
        <Alert title="Success!" corner='full' />
    )
}

Content

The content of the Alert the text displayed as the Alert's title. If not provided, the title section of the Alert will not be displayed.

Example usage:

Success!

Your prefered description

Success!

Your prefered description

function(){
    return(
        <div>
            <Alert title="Success!" />
            <Alert icon={<CheckCircle />}  title="Success!" />
            <Alert message="Success!" />
            <Alert title="Success!" message='Your prefered description' />
            <Alert icon={<CheckCircle />}  title="Success!"  message='Your prefered description' />
        </div>
    )
}

Icon

The icon prop allows you to display an icon alongside the Alert. It accepts any ReactNode, such as an icon from the @pillar-ui/icons package. If no icon is provided, no icon will be displayed. Example usage:

Success!

Your prefered description

<Paper borderColor="opa-6" flow="sm" ="sm" background="bg-3" corner="sm">
  <Alert icon={<CircleCheck width="32" />} title="Success!" />
  <Alert icon={<CircleCheck width="32" />} title="Success!" />
  <Alert icon={<CircleCheck width="48" />} title="Success!" message="Your prefered description" />
</Paper>

Closable

The closable prop determines whether the Alert should be closable by the user. If set to true, a close button will be displayed on the Alert. If not provided, it defaults to false.

Example usage:

Success!