ConfirmationCard

Notes

Wraps provided children in a styled box that supports one or two call to action buttons. This is not a modal dialog, but rather is intended to rendered inline with other content.

Props

buttonContainerClassNamestring
Class applied to the container of the buttons
caretPositiononeOf('left', 'right')['left']
If showCaret is true, the position of the caret. Defaults to left
childrenany
The content that will appear in the body of the Confirmation Card
classNamestring
primaryCTAPropsobject
Props to pass through to a Button
secondaryCTAPropsobject
Props to pass through to a Button
shouldHaveFocusbool[false]
Sets focus to the Confirmation Card when displayed
showCaretbool[false]
Shows a caret on the bottom of the Confirmation Card.

<ConfirmationCard
  caretPosition="left"
  shouldHaveFocus
  primaryCTAProps={{
    children: "Thanks",
    onClick: () => { console.log('Clicked primary')}
  }}
  secondaryCTAProps={{
    children: "Got it",
    onClick: () => { console.log('Clicked secondary')}
  }}
>
  <Heading
    className="mb2 text-bold"
    size="lg"
    tagName="h2"
  >
    Heading Text
  </Heading>
  <p>This is a confirmation card!</p>
</ConfirmationCard>

<ConfirmationCard
  caretPosition="left"
  shouldHaveFocus
  primaryCTAProps={{
    children: "Thanks",
    onClick: () => { console.log('Clicked primary')}
  }}
  secondaryCTAProps={{
    children: "Got it",
    onClick: () => { console.log('Clicked secondary')}
  }}
>
  <Heading
    className="mb2 text-bold"
    size="lg"
    tagName="h2"
  >
    Heading Text
  </Heading>
  <p>This is a confirmation card!</p>
</ConfirmationCard>

<div className={"mb5"}>
  <ConfirmationCard
    primaryCTAProps={{
      children: "Great"
    }}
    showCaret
    caretPosition="right"
  >
    <Heading
      className="mb2 text-bold"
      size="lg"
      tagName="h2"
    >
      Heading Text
    </Heading>
    <p>This is a confirmation card with a caret!</p>
  </ConfirmationCard>
</div>

<div className={"mb5"}>
  <ConfirmationCard
    primaryCTAProps={{
      children: "Great"
    }}
    showCaret
    caretPosition="right"
  >
    <Heading
      className="mb2 text-bold"
      size="lg"
      tagName="h2"
    >
      Heading Text
    </Heading>
    <p>This is a confirmation card with a caret!</p>
  </ConfirmationCard>
</div>