Alert

Alert allow users to be notified about certain events.

Usage

import { Alert } from '@elegantui/atoms';

Basic Example

import { Alert } from '@elegantui/atoms';

export default function App() {
  return <Alert>Hello Friend</Alert>;
}

Variants

Alert component is available in three variants.

import { Alert } from '@elegantui/atoms';

export default function App() {
  return (
    <Alert
      variant='raised' // 'flat' | 'bordered'
    >
      Hello Friend
    </Alert>
  );
}

Appearance

Alert component is available in six appearances.

import { Alert } from '@elegantui/atoms';

export default function App() {
  return (
    <Alert
      appearance='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    >
      Hello Friend
    </Alert>
  );
}

Dismissble

Alert can be dimissed by adding a dismissible and dismissHandler prop. The dismissHandler is a callback function that is called when the X button inside the Alert is clicked.

import { Alert } from '@elegantui/atoms';

export default function App() {
  return (
    <Alert appearance='success' dismissible dismissHandler={() => {}}>
      Success
    </Alert>
  );
}

Custom Icon

Alert component supports an optional customIcon prop to display any icon on the left of the Alert.

import { Alert } from '@elegantui/atoms';

export default function App() {
  return (
    <Alert
      customIcon={
        <svg
          xmlns='http://www.w3.org/2000/svg'
          height='1.5rem'
          width='1.5rem'
          fill='none'
          viewBox='0 0 24 24'
          stroke='currentColor'
          strokeWidth={2}
        >
          <path
            strokeLinecap='round'
            strokeLinejoin='round'
            d='M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'
          />
        </svg>
      }
      appearance='success'
      dismissible
      dismissHandler={() => {}}
    >
      Success
    </Alert>
  );
}

Custom styles

Alert component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

Available Props