Callout

A box that sets a note or a warning apart from the text around it.

Usage

Mount Callout.Title for a title, then write the content. The notes on these pages are Callouts.

tsx

<Callout>
  <Callout.Title>note</Callout.Title>
  Changes to the tokens apply to every component at once.
</Callout>

Any content

tsx

<Callout>
  <Callout.Title>heads up</Callout.Title>
  <p>Order matters: tailwindcss first, then margo-ui.</p>
  <pre>@import "tailwindcss";</pre>
</Callout>

heads up

Order matters: tailwindcss first, then margo-ui.

@import "tailwindcss";

Colour

There are no variants: change the border and the text with className.

tsx

<Callout className="border-medium text-medium">
  <Callout.Title className="text-medium">deprecated</Callout.Title>
  This API changes in the next major version.
</Callout>

Reference

prop	type	default
`as?`	`ElementType`	`"aside"`	the element or component to render
`className?`	`string`	`—`	merged last, so it wins
`…rest`	`props of as`	`—`	typed against the chosen element

Margo UI