Welcome UI - Customizable design system with react

import * as React from 'react'
import { Alert } from '@welcome-ui/alert'

const Example = () => {
  return (
    <Alert>
      <Alert.Title>This is an alert</Alert.Title>
      <span>
        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.
      </span>
    </Alert>
  )
}

export default Example

Installation

Run the following command:

yarn add @welcome-ui/alert

Import component:

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

Examples

Variants

Sizes

By default the size is sm.

Only a title

We include an icon that matches the variant, but you have the option to remove it or replace it with a custom node.

With CTA

When the cta prop is used, it will be displayed in a column on the right.

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.