Callout

A feedback component that highlights important messages or notices within a visually distinct container.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Sizes

Use the callout-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

With Accent

Use the decoration-accent-{position} class to add a decorative accent to the component. Refer to the Accents section for more information.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtlelinkplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Customizing

globals.css


:root {
  --ex-callout-font-size-sm: var(--text-xs);
  --ex-callout-font-size-md: var(--text-sm);
  --ex-callout-font-size-lg: var(--text-base);
 
  --ex-callout-gap-x-sm: calc(var(--spacing) * 2);
  --ex-callout-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-callout-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-callout-px-sm: calc(var(--spacing) * 4);
  --ex-callout-px-md: calc(var(--spacing) * 5);
  --ex-callout-px-lg: calc(var(--spacing) * 6);
 
  --ex-callout-py-sm: calc(var(--spacing) * 4);
  --ex-callout-py-md: calc(var(--spacing) * 5);
  --ex-callout-py-lg: calc(var(--spacing) * 6);
 
  --ex-callout-radius-sm: var(--radius-sm);
  --ex-callout-radius-md: var(--radius-sm);
  --ex-callout-radius-lg: var(--radius-sm);
 
  --ex-callout-indicator-font-size-sm: var(--text-lg);
  --ex-callout-indicator-font-size-md: var(--text-xl);
  --ex-callout-indicator-font-size-lg: var(--text-2xl);
 
  --ex-callout-content-gap-x-sm: calc(var(--spacing) * 2);
  --ex-callout-content-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-callout-content-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-callout-content-gap-y-sm: calc(var(--spacing) * 2);
  --ex-callout-content-gap-y-md: calc(var(--spacing) * 2);
  --ex-callout-content-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-callout-title-font-size-sm: var(--text-sm);
  --ex-callout-title-font-size-md: var(--text-base);
  --ex-callout-title-font-size-lg: var(--text-lg);
 
  --ex-callout-title-font-weight: var(--font-weight-semibold);
 
  --ex-callout-description-font-size-sm: var(--text-xs);
  --ex-callout-description-font-size-md: var(--text-sm);
  --ex-callout-description-font-size-lg: var(--text-base);
 
  --ex-callout-description-font-weight: var(--font-weight-normal);
  --ex-callout-description-opacity: var(--ex-options-opacity-muted);
}

API

Callout

Element	Selector
`Callout`	`.ex-callout`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Callout Indicator

Element	Selector
`Callout.Indicator`	`.ex-callout-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Callout Content

Element	Selector
`Callout.Content`	`.ex-callout-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Callout Title

Element	Selector
`Callout.Title`	`.ex-callout-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Callout Description

Element	Selector
`Callout.Description`	`.ex-callout-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`