Alert

The Alert component displays a short message that attracts user's attention.

Usage

Basic Usage

import { Alert } from '@snipshot/particles';

export default function AlertDefault() {
  return (
    <Alert
      heading="Message sent"
      closeButtonLabel="Close alert"
      onClose={() => console.log('Close alert')}
    >
      Thank you, we will reply to you soon!
    </Alert>
  );
}

Colors

The color scheme of the Alert component also affects the default icon. There are four status colors: success, info, warning, and error, each of which has a corresponding informational icon.
In addition to these status colors, there are three base colors: primary, secondary, and tertiary. These last three color options use the info icon by default.

Open Sandbox

Variants

The Alert component comes with several variants to suit your design needs. Pass the variant prop with one of the values: 'filled', 'outlined', 'soft', or 'minimal'

Open Sandbox

Radiuses

You can choose from a one of the predefined border radius values by providing a radius prop value.

Open Sandbox

Action elements

In addition to the close button (or without it by default), you have the flexibility to include custom action elements on the right side of the Alert component:

Open Sandbox

Custom icons

The icon property lets ypu insert any icon or even emojis on the left side of the alert:

Open Sandbox

Accessibility

The Alert component prioritizes accessibility and adheres to best practices (opens in a new tab) to ensure that it can be used by all users. It achieves accessibility through the following key features:

Semantic HTML: The component is built using semantically structured HTML elements to ensure compatibility with screen readers and assistive technologies.
Role Attribute: By default, the role attribute is set to alert.
aria-labelledby: The aria-labelledby attribute is utilized, referencing the Alert component's heading.
aria-describedby: The aria-describedby attribute has a value of the Alert component's message text. This attribute offers additional context and information to assistive technologies.

API Reference

Alert component extends default <section> element props with the following props:

Prop	Type	Default	Description
actionElement	`React.ReactNode`	`undefined`	Interactive component on the right
closeButtonLabel	`string`	`'Close alert message'`	`aria-label` value for a close button
color	`'success' \| 'info' \| 'warning' \| 'error' \| 'primary' \| 'secondary' \| 'tertiary'`	`'success'`	Alert's color scheme
heading	`string \| React.ReactNode`	`undefined`	Alert's message heading
headingProps	`TextProps`	`undefined`	`Text` component properties for alert's heading
icon	`React.ReactNode \| boolean`	`true`	Icon component on the left
onClose	`() => void`	`undefined`	`onClick` handler for a close button
radius	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'round' \| 'none'`	`'sm'`	Border radius value
textProps	`TextProps`	`undefined`	`Text` component properties for alert's message
variant	`'filled' \| 'outlined' \| 'soft' \| 'minimal'`	`'soft'`	Styling variant

Getting started Avatar