Callout

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/callout

NPM

npm install @leafygreen-ui/callout

Example

<Callout variant={Variant.Note} title="Title">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
</Callout>

Output HTML

<div className="leafygreen-ui-15l3je2">
  <div>
    <div className="leafygreen-ui-1gyqpuu">
      <svg
        width="16"
        height="16"
        role="img"
        viewBox="0 0 16 16"
        className="leafygreen-ui-1n4dsve"
      >
        <title>Edit Icon</title>
        <path
          d="M11.352 6.648l-2-2L11 3l2 2-1.648 1.648zM6 12l-3 1 1-3 4.648-4.648 2 2L6 12z"
          fill="currentColor"
          fillRule="evenodd"
        ></path>
      </svg>
      <div>Note</div>
    </div>
    <div className="leafygreen-ui-1wkamxg">
      <div className="leafygreen-ui-oll38v">Title</div>
      <div className="leafygreen-ui-7kuxj3">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </div>
    </div>
  </div>
</div>

Properties

| Prop | Type | Description | Default | | -------------- | ---------------------------------------------------------- | --------------------------------------------------------- | ------- | | variant | 'note', 'tip', 'important', 'warning', 'example' | Sets the variant for the Callout | | | children | node | The contents to display within the Callout | | | title | string | Optional title text to display above Callout text | | | className | string | Adds a className to the outermost element | | | baseFontSize | 13, 16 | Determines font-size for body copy in Callout component | 13 | | darkMode | boolean | Determines if the component renders in dark theme | false |