Search documentation v0.6.1

Alert

Capture user attention with important messages

Source ↗️ Report Issue ↗️

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.
How to use Alerts in Astro
---
import { Alert } from 'webcoreui/astro'
---
<Alert theme="info" title="Note">
You can create different alert elements with various themes.
</Alert>
How to use Alerts in Svelte
<script>
import { Alert } from 'webcoreui/svelte'
</script>
<Alert theme="info" title="Note">
You can create different alert elements with various themes.
</Alert>
How to use Alerts in React
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.
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'>
PropPurpose
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 propPurpose
icon Pass your Icon component to use a custom icon with the alert.

Request improvement for this page