Callout

Usage

import {
  Callout,
  CalloutAction,
  CalloutTitle,
  CalloutContent,
} from "@govtechmy/myds-react/callout";

export default () => (
  <Callout>
    <CalloutTitle />
    <CalloutContent />
    <CalloutAction>
      <CalloutClose />
    </CalloutAction>
  </Callout>
);

Examples

Variant

Use the variant prop to change the callout style!

Layout

A basic callout consisting of title and action will be displayed an inline manner, while callouts with all three elements (title, content & action) will be displayed in a stacked manner.

Dismissible

If the callout is dismissible, you can display a close button on the top right corner by declaring the dismissible prop. To capture the dismiss event, you may use the onDismiss prop.

To dismiss the callout via event listener, simply wrap the target element with CalloutClose. CalloutClose will also trigger the onDismiss event, if defined.

Props

Callout