Alert

The Alert component is used to provide users with important messages or feedback. It ensures that critical information is conveyed in a clear and visually distinct manner. This component can be customized to fit various contexts and uses within the application.

Source

Github

import { Alert } from 'welcome-ui/Alert'

const Example = () => {
  return <Alert>Nunc laoreet egestas nulla</Alert>
}

export default Example

Examples

Variants

Github

Custom Icon

Github

Sizes

By default the size is sm.

Github

Alert.Title

Github

Alert.Button

When the cta prop is used, by default it will be displayed in a row bellow the content.

Github

Full Width

Set property isFullWidth to take the full width of the parent.

Github

CloseButton

To show a close button you need to pass your function on the handleClose property.

Github

Visually hidden Sticky note