Callout

Highlight an editorial note or a rule for using the brand correctly.

<Callout tone="note">
  <p>Use the supplied artwork for every application.</p>
</Callout>

Usage

Put the explanation in the default slot. Without a title or tone, the heading uses the localized note label.

<Callout>

Use the supplied artwork for every application.

</Callout>

The default preview sets tone="note" explicitly; omitting it produces the same note treatment.

Examples

Add an editorial note

Use tone="note" for supporting information. Leaving out title keeps the localized note heading.

<Callout tone="note">
  <p>Use the supplied artwork for every application.</p>
</Callout>

Mark a recommended use

Use tone="do" for a positive rule. Omit title to keep the localized heading for that tone; a custom title replaces that heading rather than translating it.

<Callout tone="do">
  <p>Keep the supplied artwork at its original proportions.</p>
</Callout>

Explain a prohibited use

Use tone="dont" for a prohibition and a custom title to name the rule. The title replaces the localized heading and is rendered exactly as supplied.

<Callout tone="dont" title="Keep the original proportions">
  <p>Do not stretch or compress the supplied artwork.</p>
</Callout>

The page’s localized labels are supplied automatically. Pass a complete ui value to override them for this callout. Spread the existing value and its content group to change the note label while preserving all other strings. For a single heading, title is the simpler option.

<Callout ui={{ ...props.ui, content: { ...props.ui.content, note: "Design note" } }}>

Keep the original proportions.

</Callout>

API reference

PropType

ui?UIStrings

Override interface strings for this component. Supplied automatically in Brandtree MDX.

TypeUIStrings

Defaultprops.ui

tone?"note" | "do" | "dont"

Select the note, recommendation, or prohibition treatment.

Type"note" | "do" | "dont"

Default"note"

title?string

Heading; defaults to the localized label for the tone.

Typestring

class?string

Additional class on the outer element.