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.

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

const Example = () => {
  return (
    <Alert>
      Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
      ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
    </Alert>
  )
}

export default Example

Examples

Variants

Sizes

By default the size is sm.

Alert.Title

Alert.Button

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

Full Width

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

CloseButton

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

Hide Icon

On some case we need to hide the icon with hideIcon property.