Alert

The Alert component provides a flexible UI element for displaying alert messages. It is composed of several subcomponents such as AlertContainer, AlertTitle, and AlertDescription to offer a structured and customizable interface.

Usage

import { Alert } from '@harnessio/ui/components'

return (
  <Alert.Container>
    <Alert.Title>Alert Title</Alert.Title>
    <Alert.Description>This is the alert description.</Alert.Description>
  </Alert.Container>
)

Anatomy

All parts of the Alert component can be imported and composed as required.

<Alert.Container>
  <Alert.Title>Alert Title</Alert.Title>
  <Alert.Description>This is the alert description.</Alert.Description>
</Alert.Container>

API Reference

Container

The Container component serves as the main container for all alert elements.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Title

The Title component displays the title of the alert.

<Alert.Title>Alert Title</Alert.Title>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Description

The Description component displays the description of the alert.

<Alert.Description>This is the alert description.</Alert.Description>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string