Alert - rafty/ui Docs

An alert displays a short, important message in a way that captures the user's attention without disrupting the ongoing task.

This is a custom component crafted to adhere to our styling conventions, resulting in limited styling options and available props.

Anatomy

Import all parts and piece them together.

import { Alert, AlertDescription, AlertIcon, AlertTitle } from "@rafty/ui";

<Alert>
  <AlertIcon />
  <AlertTitle />
  <AlertDescription />
</Alert>;

Usage

Title

Description

<Alert>
  <AlertIcon />
  <AlertTitle>
    Title
  </AlertTitle>
  <AlertDescription>
    Description
  </AlertDescription>
</Alert>

Size

There are 3 size options available: sm, md (default) & lg

Title

Description

<Alert size="sm">
  <AlertIcon />
  <AlertTitle>
    Title
  </AlertTitle>
  <AlertDescription>
    Description
  </AlertDescription>
</Alert>

Status

There are 4 status options in alert: success, warning, error & info (default).

Title

Description

Title

Description

Title

Description

Title

Description

<div className="w-full space-y-4">
  <Alert>
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert status="success">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert status="warning">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert status="error">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
</div>

Variant

There are 4 variant options in alert: simple (default), solid, left-accent & top-accent.

Title

Description

Title

Description

Title

Description

Title

Description

<div className="w-full space-y-4">
  <Alert>
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert variant="solid">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert variant="left-accent">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
  <Alert variant="top-accent">
    <AlertIcon />
    <AlertTitle>
      Title
    </AlertTitle>
    <AlertDescription>
      Description
    </AlertDescription>
  </Alert>
</div>

Barebone

Pass isBarebone prop to remove all style in alert.

Title

Description

<Alert
  className="flex h-16 w-full items-center gap-1 rounded-md border border-green-500 bg-green-300/40 p-4 dark:text-white"
  isBarebone
>
  <AlertIcon className="h-7 w-7" />
  <AlertTitle>
    Title
  </AlertTitle>
  <AlertDescription>
    Description
  </AlertDescription>
</Alert>

Unstyled

Pass isUnstyled prop to remove all style from a particalr sub component.

Title

Description

<Alert>
  <AlertIcon />
  <AlertTitle isUnstyled>
    Title
  </AlertTitle>
  <AlertDescription>
    Description
  </AlertDescription>
</Alert>

API

Root

Property	Description	Type	Default
UnStyled	Removes Style from component and sub-component	`boolean`	false
isBarebone	Removes style from whole component	`boolean`	false

Icon

Property	Description	Type	Default
UnStyled	Removes Style from component and sub-component	`boolean`	false

Title

Property	Description	Type	Default
UnStyled	Removes Style from component and sub-component	`boolean`	false

Description

Property	Description	Type	Default
UnStyled	Removes Style from component and sub-component	`boolean`	false