Alert.mdx

import { Canvas, ArgTypes } from '@storybook/addon-docs'; import { Primary } from './Alert.stories';

Alert

Alerts are a flexible component used to display highlighted content prominently.

How to Use

There are 4 variants of alerts: info, success, warning, and error. By default, the alert will display as the info variant.

You can change the variant of the alert by adding the variant prop to the component.

All main content goes into the default slot. To add a heading for the Alert, use the slot #heading.

To hide the Alert Icon, set the showIcon prop to false.

To include a Close (x) button, add the showCloseButton prop as true. The button will emit close on click.

If adding a link with linkSrc(String) to be displayed, the link display text can also be set as the linkDisplayText (defaults to 'Learn more').

Please note: though you can only insert text in the Storybook demo, the component will accept any valid HTML or Vue component.

Example of using this component as a default info alert in a template

<alert>
  <p>
    You are in <span class="bold">LIVE</span> mode, all verifications will be
    charged according to your <a href="#">chosen plan</a>.
  </p>
</alert>

Example of using this component as a warning with a heading

<alert variant="warning">
  <template v-slot:heading> Alert heading! </template>
  <p>
    You are in <span class="bold">LIVE</span> mode, all verifications will be
    charged according to your <a href="#">chosen plan</a>.
  </p>
</alert>

Example of using this component with a link

<alert link-src="www.lob.com" link-display-text="click here for more">
  {{ content }}
</alert>

Props