Alert

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

Usage

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

//...

return (
  <Alert.Root
    theme="info"
    expandable
    dismissible
  >
    <Alert.Title>My Alert</Alert.Title>

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

    <Alert.Link to="/someplace">
      Learn more
    </Alert.Link>
  </Alert.Root>
)

Anatomy

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

<Alert.Root>
  <Alert.Title />
  <Alert.Description />
  <Alert.Link />
</Alert.Root>

API Reference

Root

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

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
theme	false		'info' | 'warning' | 'danger'
dismissible	false		boolean
expandable	false		boolean
onDismiss	false		() => void

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

Link

The Link component is used to create a link within the alert.

<Alert.Link to="/path">Learn more</Alert.Link>

Prop	Required	Default	Type
to	true		string
children	true		ReactNode
className	false		string
external	false	false	boolean
asChild	false	false	boolean