Alert

Alerts are used to communicate a state that affects a system, feature or page.

Used to inform the user of something important in a prominent way.

Component usage

Change the status of the alerts by passing the required type prop. This affects the color scheme and the default icon. Alert supports error, success, warning, neutral and info type.

import { Alert, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Alert type="info">A custom alert message should be defined here.</Alert>
      <Alert type="neutral">A custom alert message should be defined here.</Alert>
      <Alert type="warning">A custom alert message should be defined here.</Alert>
      <Alert type="success">A custom alert message should be defined here.</Alert>
      <Alert type="error">A custom alert message should be defined here.</Alert>
    </Stack>
  );
}

Title

Provide a title text for the Alert by using the title-property.

import { Alert } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Alert title="Title" type="info">
      A custom alert message should be defined here.
    </Alert>
  );
}

Close button

When providing a value to the onClose-prop, a Close Button will show in the top right corner of Alert.

import { Alert } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Alert onClose={() => {}} type="info">
      A custom alert message should be defined here.
    </Alert>
  );
}

Custom Icon

Use the icon-property to set a custom icon for Alert. Import an icon component from the icon library and pass it to define your custom icon. The Alert component is always displayed with an icon, whether it’s the default icon or a custom one.

import { Alert, TrendUpIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Alert icon={TrendUpIcon} type="success">
      Trend alert, sales are up 20% compared to last month.
    </Alert>
  );
}

Icon Alignment

Possibility to change vertical alignment of the icon by using the iconVerticalAlign-prop. Default is center without title and flex-start when title is set. iconVerticalAlign overrides the default alignment.

import { Alert, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Alert iconVerticalAlign="center" title="Title" type="info">
        A custom alert message should be defined here.
      </Alert>
      <Alert iconVerticalAlign="flex-start" title="Title" type="info">
        A custom alert message should be defined here.
      </Alert>
    </Stack>
  );
}