Callout

Usage

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

export default () => (
  <Callout>
    <CalloutTitle />
    <CalloutContent />
    <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 programmatically via event listeners inside CalloutAction's children, you may use the dismiss function passed as an argument to the render prop.

Props

Callout

CalloutAction