Callout

A static semantic message surface with a tone-specific icon. It is not a live alert and does not include dismissal behavior.

Default tone

With no tone supplied, Callout uses the info treatment.

Information message.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-callout/ui-callout.html"
>

<ui-callout>Information message.</ui-callout>

<script setup>
  import { UiCallout } from "@threadlabs/looma";
</script>

<template>
  <UiCallout>Information message.</UiCallout>
</template>

import { UiCallout } from "@threadlabs/looma";

export default function Example() {
  return <UiCallout>Information message.</UiCallout>;
}

/** @jsxImportSource preact */
import { UiCallout } from "@threadlabs/looma";

export default function Example() {
  return <UiCallout>Information message.</UiCallout>;
}

<script>
  import { UiCallout } from "@threadlabs/looma";
</script>

<UiCallout>Information message.</UiCallout>

import { Component } from "@angular/core";
import { UiCallout } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCallout],
  template: `
    <div
      ui-callout
    >Information message.</div>
  `,
})
export default class Example {}

Tone values

Advice, emphasis, warnings, and confirmations have distinct icons and colors. Tip shares Info’s palette; Caution uses danger styling.

Note message.

Tip message.

Info message.

Important message.

Warning message.

Danger message.

Success message.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-stack/ui-stack.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-callout/ui-callout.html"
>

<ui-stack
  gap="s"
>
  <ui-callout
    tone="note"
  >Note message.</ui-callout>
  <ui-callout
    tone="tip"
  >Tip message.</ui-callout>
  <ui-callout
    tone="info"
  >Info message.</ui-callout>
  <ui-callout
    tone="important"
  >Important message.</ui-callout>
  <ui-callout
    tone="warning"
  >Warning message.</ui-callout>
  <ui-callout
    tone="danger"
  >Danger message.</ui-callout>
  <ui-callout
    tone="success"
  >Success message.</ui-callout>
</ui-stack>

<script setup>
  import { UiCallout, UiStack } from "@threadlabs/looma";
</script>

<template>
  <UiStack
    gap="s"
  >
    <UiCallout
      tone="note"
    >Note message.</UiCallout>
    <UiCallout
      tone="tip"
    >Tip message.</UiCallout>
    <UiCallout
      tone="info"
    >Info message.</UiCallout>
    <UiCallout
      tone="important"
    >Important message.</UiCallout>
    <UiCallout
      tone="warning"
    >Warning message.</UiCallout>
    <UiCallout
      tone="danger"
    >Danger message.</UiCallout>
    <UiCallout
      tone="success"
    >Success message.</UiCallout>
  </UiStack>
</template>

import { UiCallout, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="s"
  >
    <UiCallout
      tone="note"
    >Note message.</UiCallout>
    <UiCallout
      tone="tip"
    >Tip message.</UiCallout>
    <UiCallout
      tone="info"
    >Info message.</UiCallout>
    <UiCallout
      tone="important"
    >Important message.</UiCallout>
    <UiCallout
      tone="warning"
    >Warning message.</UiCallout>
    <UiCallout
      tone="danger"
    >Danger message.</UiCallout>
    <UiCallout
      tone="success"
    >Success message.</UiCallout>
  </UiStack>;
}

/** @jsxImportSource preact */
import { UiCallout, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="s"
  >
    <UiCallout
      tone="note"
    >Note message.</UiCallout>
    <UiCallout
      tone="tip"
    >Tip message.</UiCallout>
    <UiCallout
      tone="info"
    >Info message.</UiCallout>
    <UiCallout
      tone="important"
    >Important message.</UiCallout>
    <UiCallout
      tone="warning"
    >Warning message.</UiCallout>
    <UiCallout
      tone="danger"
    >Danger message.</UiCallout>
    <UiCallout
      tone="success"
    >Success message.</UiCallout>
  </UiStack>;
}

<script>
  import { UiCallout, UiStack } from "@threadlabs/looma";
</script>

<UiStack
  gap="s"
>
  <UiCallout
    tone="note"
  >Note message.</UiCallout>
  <UiCallout
    tone="tip"
  >Tip message.</UiCallout>
  <UiCallout
    tone="info"
  >Info message.</UiCallout>
  <UiCallout
    tone="important"
  >Important message.</UiCallout>
  <UiCallout
    tone="warning"
  >Warning message.</UiCallout>
  <UiCallout
    tone="danger"
  >Danger message.</UiCallout>
  <UiCallout
    tone="success"
  >Success message.</UiCallout>
</UiStack>

import { Component } from "@angular/core";
import { UiCallout, UiStack } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiStack, UiCallout],
  template: `
    <div
      ui-stack
      [gap]="'s'"
    >
      <div
        ui-callout
        [tone]="'note'"
      >Note message.</div>
      <div
        ui-callout
        [tone]="'tip'"
      >Tip message.</div>
      <div
        ui-callout
        [tone]="'info'"
      >Info message.</div>
      <div
        ui-callout
        [tone]="'important'"
      >Important message.</div>
      <div
        ui-callout
        [tone]="'warning'"
      >Warning message.</div>
      <div
        ui-callout
        [tone]="'danger'"
      >Danger message.</div>
      <div
        ui-callout
        [tone]="'success'"
      >Success message.</div>
    </div>
  `,
})
export default class Example {}

Heading

An optional heading names the message above its text.

Before you upgrade Back up your data first; the migration cannot be undone.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-callout/ui-callout.html"
>

<ui-callout
  tone="warning"
  heading="Before you upgrade"
>Back up your data first; the migration cannot be undone.</ui-callout>

<script setup>
  import { UiCallout } from "@threadlabs/looma";
</script>

<template>
  <UiCallout
    tone="warning"
    heading="Before you upgrade"
  >Back up your data first; the migration cannot be undone.</UiCallout>
</template>

import { UiCallout } from "@threadlabs/looma";

export default function Example() {
  return <UiCallout
    tone="warning"
    heading="Before you upgrade"
  >Back up your data first; the migration cannot be undone.</UiCallout>;
}

/** @jsxImportSource preact */
import { UiCallout } from "@threadlabs/looma";

export default function Example() {
  return <UiCallout
    tone="warning"
    heading="Before you upgrade"
  >Back up your data first; the migration cannot be undone.</UiCallout>;
}

<script>
  import { UiCallout } from "@threadlabs/looma";
</script>

<UiCallout
  tone="warning"
  heading="Before you upgrade"
>Back up your data first; the migration cannot be undone.</UiCallout>

import { Component } from "@angular/core";
import { UiCallout } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCallout],
  template: `
    <div
      ui-callout
      [tone]="'warning'"
      [heading]="'Before you upgrade'"
    >Back up your data first; the migration cannot be undone.</div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`heading`	A short heading above the message, such as "Before you upgrade". Optional; without it the message stands alone.	`heading`	`string`		`—`
`tone`	Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, note or neutral for a muted aside, tip for advice, important for something the reader must not miss, warning for a caution, danger (or its alias caution) for a harmful consequence, and success for a confirmation. These are the tones of VitePress, Docusaurus and GitHub alerts.	`tone`	`keyword`	`info`	`info, neutral, note, tip, important, warning, caution, success, danger`

Framework props

Name	Type	Default	Allowed values
`heading`	`string`		`—`
`tone`	`"info" \| "neutral" \| "note" \| "tip" \| "important" \| "warning" \| "caution" \| "success" \| "danger"`	`info`	`info, neutral, note, tip, important, warning, caution, success, danger`

Events

No events.

Slots

Name	Purpose
`default`	Default child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

Token	Declared values	Fallback
`--ui-callout-border`	`var(--ui-info-soft-border) \| var(--ui-border-strong) \| var(--ui-accent-soft-border) \| var(--ui-warning-soft-border) \| var(--ui-success-soft-border) \| var(--ui-danger-soft-border)`	`—`
`--ui-callout-border-width`	`—`	`var(--ui-border-width)`
`--ui-callout-gap`	`—`	`calc(var(--ui-space-2) * 0.75)`
`--ui-callout-icon`	`var(--ui-info-subtle-text) \| var(--ui-text-secondary) \| var(--ui-accent-subtle-text) \| var(--ui-warning-subtle-text) \| var(--ui-success-subtle-text) \| var(--ui-danger-subtle-text)`	`—`
`--ui-callout-icon-column`	`—`	`1.125rem`
`--ui-callout-icon-size`	`—`	`1.125rem`
`--ui-callout-leading-border-width`	`—`	`var(--ui-callout-border-width, var(--ui-border-width))`
`--ui-callout-padding-block`	`—`	`var(--ui-space-2)`
`--ui-callout-padding-inline`	`—`	`var(--ui-space-2) \| var(--ui-space-3)`
`--ui-callout-surface`	`var(--ui-info-soft) \| var(--ui-surface-muted) \| var(--ui-accent-soft) \| var(--ui-warning-soft) \| var(--ui-success-soft) \| var(--ui-danger-soft)`	`—`
`--ui-callout-text`	`var(--ui-info-subtle-text) \| var(--ui-text-primary) \| var(--ui-accent-subtle-text) \| var(--ui-warning-subtle-text) \| var(--ui-success-subtle-text) \| var(--ui-danger-subtle-text) \| var(--ui-callout-text, var(--_callout-tone-text))`	`—`

Shared tokens

Token	Fallback
`--ui-accent-soft`	`—`
`--ui-accent-soft-border`	`—`
`--ui-accent-subtle-text`	`—`
`--ui-border-strong`	`—`
`--ui-border-width`	`—`
`--ui-danger-soft`	`—`
`--ui-danger-soft-border`	`—`
`--ui-danger-subtle-text`	`—`
`--ui-font-family-sans`	`—`
`--ui-font-normal`	`—`
`--ui-font-semibold`	`—`
`--ui-font-size-sm`	`—`
`--ui-info-soft`	`—`
`--ui-info-soft-border`	`—`
`--ui-info-subtle-text`	`—`
`--ui-line-height-md`	`—`
`--ui-radius-md`	`—`
`--ui-space-2`	`—`
`--ui-space-3`	`—`
`--ui-success-soft`	`—`
`--ui-success-soft-border`	`—`
`--ui-success-subtle-text`	`—`
`--ui-surface-muted`	`—`
`--ui-text-primary`	`—`
`--ui-text-secondary`	`—`
`--ui-warning-soft`	`—`
`--ui-warning-soft-border`	`—`
`--ui-warning-subtle-text`	`—`