Alert

Displays important alert messages.

Basic Usage

Alert components are non-overlay elements in the page that does not disappear automatically.

Alert provides 5 types of themes defined by type, whose default value is info. primary has been added in 2.9.11.

Primary alert

Success alert

Info alert

Warning alert

Error alert

export function AlertBasic() {  return (    <div style={box}>      <ElAlert title="Primary alert" type="primary" />      <ElAlert title="Success alert" type="success" style={gap} />      <ElAlert title="Info alert" type="info" style={gap} />      <ElAlert title="Warning alert" type="warning" style={gap} />      <ElAlert title="Error alert" type="error" style={gap} />    </div>  );}

Theme

Alert provide two different themes, light and dark.

Set effect to change theme, default is light.

Primary alert

Success alert

Info alert

Warning alert

Error alert

export function AlertTheme() {  return (    <div style={box}>      <ElAlert title="Primary alert" type="primary" effect="dark" />      <ElAlert title="Success alert" type="success" effect="dark" style={gap} />      <ElAlert title="Info alert" type="info" effect="dark" style={gap} />      <ElAlert title="Warning alert" type="warning" effect="dark" style={gap} />      <ElAlert title="Error alert" type="error" effect="dark" style={gap} />    </div>  );}

Customizable Close Button

Customize the close button as texts or other symbols.

Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. closable attribute decides if the component can be closed or not. It accepts boolean, and the default is true. You can set close-text attribute to replace the default cross symbol as the close button. Be careful that close-text must be a string. close event fires when the component is closed.

Unclosable alert

Customized close text

Gotcha

Alert with callback

export function AlertCustomClose() {  return (    <div style={box}>      <ElAlert title="Unclosable alert" type="success" closable={false} />      <ElAlert title="Customized close text" type="info" closeText="Gotcha" style={gap} />      <ElAlert title="Alert with callback" type="warning" style={gap} />    </div>  );}

With Icon

Displaying an icon improves readability.

Setting the show-icon attribute displays an icon that corresponds with the current Alert type. Or use the icon slot to customize icon.

Primary alert

Success alert

Info alert

Warning alert

Error alert

Error alert with custom icon

export function AlertIcon() {  return (    <div style={box}>      <ElAlert title="Primary alert" type="primary" showIcon />      <ElAlert title="Success alert" type="success" showIcon style={gap} />      <ElAlert title="Info alert" type="info" showIcon style={gap} />      <ElAlert title="Warning alert" type="warning" showIcon style={gap} />      <ElAlert title="Error alert" type="error" showIcon style={gap} />      <ElAlert        title="Error alert with custom icon"        type="error"        showIcon        icon={<Bell />}        style={gap}      />    </div>  );}

Centered Text

Use the center attribute to center the text.

Primary alert

Success alert

Info alert

Warning alert

Error alert

export function AlertCenter() {  return (    <div style={box}>      <ElAlert title="Primary alert" type="primary" center showIcon />      <ElAlert title="Success alert" type="success" center showIcon style={gap} />      <ElAlert title="Info alert" type="info" center showIcon style={gap} />      <ElAlert title="Warning alert" type="warning" center showIcon style={gap} />      <ElAlert title="Error alert" type="error" center showIcon style={gap} />    </div>  );}

With Description

Description includes a message with more detailed information.

Besides the required title attribute, you can add a description attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.

With description

This is a description.

export function AlertDescription() {  return (    <div style={box}>      <ElAlert        title="With description"        type="success"        description="This is a description."      />    </div>  );}

With Icon and Description

At last, this is an example with both icon and description.

Primary alert

More text description

Success alert

More text description

Info alert

More text description

Warning alert

More text description

Error alert

More text description

export function AlertIconDescription() {  return (    <div style={box}>      <ElAlert        title="Primary alert"        type="primary"        description="More text description"        showIcon      />      <ElAlert        title="Success alert"        type="success"        description="More text description"        showIcon        style={gap}      />      <ElAlert        title="Info alert"        type="info"        description="More text description"        showIcon        style={gap}      />      <ElAlert        title="Warning alert"        type="warning"        description="More text description"        showIcon        style={gap}      />      <ElAlert        title="Error alert"        type="error"        description="More text description"        showIcon        style={gap}      />    </div>  );}

Alert API

Attributes

Name	Description	Type	Default
title	alert title.	`string`	—
type	alert type.	`enum`	info
description	descriptive text.	`string`	—
closable	whether alert can be dismissed.	`boolean`	true
center	whether content is placed in the center.	`boolean`	false
close-text	customized close button text.	`string`	—
show-icon	whether a type icon is displayed.	`boolean`	false
effect	theme style.	`enum`	light

Events

Name	Description	Type
close	trigger when alert is closed.	`Function`

Slots

Name	Description
default	content of the alert description.
title	content of the alert title.
icon 2.9.7	content of the alert icon.