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

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