EssenceUI.Components.Callout (Essence UI v0.2.0)

Copy Markdown View Source

Callout component for displaying informational messages with icons.

Examples

<.callout>
  <.callout_icon>
    <.lucide_info class="h-4 w-4" />
  </.callout_icon>
  <.callout_text>
    This is an important message.
  </.callout_text>
</.callout>

# With different variants and sizes
<.callout variant="outline" size="3" color="red">
  <.callout_icon>
    <.lucide_alert_triangle class="h-5 w-5" />
  </.callout_icon>
  <.callout_text>
    This is a warning message.
  </.callout_text>
</.callout>

Props

  • size - The size of the callout. One of "1", "2", "3". Default: "2"
  • variant - The visual variant. One of "soft", "surface", "outline". Default: "soft"
  • color - The accent color. Any valid accent color. Default: "gray"
  • high_contrast - Whether to use high contrast colors. Default: false
  • radius - Border radius override. One of "none", "small", "medium", "large", "full"
  • as_child - When true, merges props into immediate child element

Summary

Functions

callout(assigns)

Functions

callout(assigns)

Attributes

  • 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. Must be 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", or "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'}.
  • 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'}.
  • mt (: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'}.
  • 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'}.
  • as_child (:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults to false.
  • radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
  • size (:string) - Callout size. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Callout variant. Defaults to "soft". Must be one of "soft", "surface", or "outline".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • style (:string) - Additional inline styles. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["id"].

Slots

  • icon - Icon for callout.
  • text (required) - Text content for callout.