Documentation Playground
Skip to content
Docs

Callout

Short message to attract user's attention.
You will need admin privileges to install and access this application. 
<.callout>
  <:icon>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
    </svg>
  </:icon>
  <:text>You will need admin privileges to install and access this application.</:text>
</.callout>

API Reference

Root

Groups icon and text parts. This component is based on the div element and supports common margin props.

Prop Type Default Description
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil Additional CSS classes
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
high_contrast boolean — Whether to increase color contrast with the background.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size string "2" Callout size
style string nil Additional inline styles
variant string "soft" Callout variant
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class Additional CSS classes
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size Callout size
Type string Default "2"
style Additional inline styles
Type string Default nil
variant Callout variant
Type string Default "soft"

Icon

Provides width and height for the icon associated with the callout. Pass an SVG inside the <:icon> slot.

Text

Renders the callout text. Pass content inside the <:text> slot.

Examples

Size

Use the size prop to control the size.

You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application. 
<.flex direction="column" gap="3" align="start">
  <.callout size="1">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>You will need admin privileges to install and access this application.</:text>
  </.callout>
  <.callout size="2">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>You will need admin privileges to install and access this application.</:text>
  </.callout>
  <.callout size="3">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>You will need admin privileges to install and access this application.</:text>
  </.callout>
</.flex>

Variant

Use the variant prop to control the visual style.

You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application. 
<.flex direction="column" gap="3">
  <.callout variant="soft">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
  <.callout variant="surface">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
  <.callout variant="outline">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
</.flex>

Color

Use the color prop to assign a specific accent color.

You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application. 
<.flex direction="column" gap="3">
  <.callout color="blue">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
  <.callout color="green">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
  <.callout color="red">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>
      You will need <.es_link href="#">admin privileges</.es_link>
      to install and access this application.
    </:text>
  </.callout>
</.flex>

High-contrast

Use the high_contrast prop to add additional contrast.

An update to Essence UI is available. See what's new in the latest release.
An update to Essence UI is available. See what's new in the latest release. 
<.flex direction="column" gap="3">
  <.callout color="gray" variant="soft">
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>An update to Essence UI is available. See what's new in the latest release.</:text>
  </.callout>
  <.callout color="gray" variant="soft" high_contrast>
    <:icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
      </svg>
    </:icon>
    <:text>An update to Essence UI is available. See what's new in the latest release.</:text>
  </.callout>
</.flex>
← Button Card →