Alert

The Alert component displays a callout for user attention with optional title, description, icon, and button. It supports different variants for various alert types.

Renamed from Message in Gravity 12.

Preview

Usage

import { Alert } from 'components/lib';

function Component({ ...props }){

  return (
    <Alert
      title="Success!"
      description="Your operation was successful."
      variant="success"
      button={{ text: 'Okay', action: () => alert('You clicked me') }}
    />
  )
);

Props

Prop	Description	Required	Value
button	button object	optional	object
className	custom styles	optional	SCSS or Tailwind object
description	description text	optional	string
icon	override the variant icon	optional	string
title	title text	optional	string
variant	alert type	required	string (info/success/warning/error)

Example

import { Alert } from 'components/lib';

function Example({ ...props }){

  return (
    <div>
      <Alert 
        title='Information'
        description='This is an info alert.'
        variant='info'
      />
      <Alert 
        title='Success'
        description='This is a success alert.'
        variant='success'
      />
      <Alert 
        title='Warning'
        description='This is a warning alert.'
        variant='warning'
      />
      <Alert 
        title='Error'
        description='This is an error alert.'
        variant='error'
      />
    </div>
  )
);

Blank Slate Message

Depreciated in v12.

Blank slate messages are used when there is no data to display and prompts the user to take action.

<BlankSlateMessage
 title='No items found'
 text='Would you like to create one?' 
 buttonText='Create Item' 
 action={ this.createItem } 
 marginLeft='2em'
/>

Props

Prop	Description	Required	Value
action	callback executed on button click	optional	function
buttonText	button label	optional	string
marginLeft	offset the left margin	optional	string
marginTop	offset the top margin	optional	string
text	message body	required	string
title	message title	optional	string

Notes

• The Alert component uses the Icon and Button components.

• The variant prop determines the styling and default icon for the alert.

• Custom styles can be applied using the className prop.

• The button prop accepts an object with button properties to render a button within the alert.

• For more details, refer to the Shadcn Alert documentation.