Alert

Capture user attention with important messages

Provide feedback, warnings, or other significant information that requires user attention. Use alert elements for notifications, success messages, warnings, or alerts.

Preview

Note

You can create different alert elements with various themes.

---
import { Alert } from 'webcoreui/astro'
---

<Alert theme="info" title="Note">
    You can create different alert elements with various themes.
</Alert>

<script>
    import { Alert } from 'webcoreui/svelte'
</script>

<Alert theme="info" title="Note">
    You can create different alert elements with various themes.
</Alert>

import React from 'react'
import { Alert } from 'webcoreui/react'

const Component = () => (
    <Alert theme="info" title="Note">
        You can create different alert elements with various themes.
    </Alert>
)

export default Component

Default Alert

Alerts can be created without any theme or title.

Default alert without title.

💡 Title with Emoji

Default alert with title.

<Alert>Default alert without title.</Alert>
<Alert title="💡 Title with Emoji">Default alert with title.</Alert>

Themes

The Alert component comes with the following four different themes:

Info

Alert’s theme set to info.

Success

Alert’s theme set to success.

Warning

Alert’s theme set to warning.

Alert

Alert’s theme set to alert.

<Alert title="Info" theme="info">Alert's theme set to <code>info</code>.</Alert>
<Alert title="Success" theme="success">Alert's theme set to <code>success</code>.</Alert>
<Alert title="Warning" theme="warning">Alert's theme set to <code>warning</code>.</Alert>
<Alert title="Alert" theme="alert">Alert's theme set to <code>alert</code>.</Alert>

Custom Icons

You can also pass custom icons to your Alert components in the following way:

Be sure to checkout our GitHub repository.

---
import { Alert, Icon } from 'webcoreui/astro'
---

<Alert>
    <Icon type="github" slot="icon" />
    Be sure to checkout our GitHub repository.
</Alert>

<Alert theme="success">
    <Icon type="github" slot="icon" />
    Be sure to checkout our GitHub repository.
</Alert>

<script>
    import { Alert, Icon } from 'webcoreui/svelte'
</script>

<Alert>
    <Icon type="github" slot="icon" />
    Be sure to checkout our GitHub repository.
</Alert>

<Alert theme="success">
    <Icon type="github" slot="icon" />
    Be sure to checkout our GitHub repository.
</Alert>

import React from 'react'
import { Alert, Icon } from 'webcoreui/react'

const Component = () => (
    <React.Fragment>
        <Alert icon={<Icon type="github" />}>
            Be sure to checkout our GitHub repository.
        </Alert>

        <Alert theme="success" icon={<Icon type="github" />}>
            Be sure to checkout our GitHub repository.
        </Alert>
    </React.Fragment>
)

export default Component

For Astro and Svelte components, pass a children with a slot named icon. For the React component, pass your icon to the icon prop.

API

type AlertProps = {
    element?: string
    title?: string
    titleTag?: string
    titleProps?: any
    bodyProps?: any
    className?: string
    theme?: 'info'
        | 'success'
        | 'warning'
        | 'alert'
}

type ReactAlertProps = {
    Element?: keyof JSX.IntrinsicElements
    TitleTag?: keyof JSX.IntrinsicElements
    icon?: React.ReactNode
} & Omit<AlertProps, 'titleTag' | 'element'>

Prop	Purpose
`element`	Set the HTML tag used for the alert. Default to `section`. Use `Element` in React.
`title`	Specifies the title for the alert.
`titleTag`	Specifies the HTML tag of the title. Default to `strong`. Use `TitleTag` in React.
`titleProps`	Pass additional attributes to the title tag of the alert.
`bodyProps`	Pass additional attributes to the body tag of the alert.
`className`	Pass additional CSS classes for the wrapper element.
`theme`	Set the theme of your alert. Can be one of `info`, `success`, `warning`, `alert`.

React prop	Purpose
`icon`	Pass your `Icon` component to use a custom icon with the alert.

<- Accordion Aspect Ratio ->

Request improvement for this page