Callout

Styled callout box for tips, warnings, and info.

Components

Callout

content

static

<arc-callout>

Overview

Callout is an inline notification block for documentation and content pages. It draws attention to supplementary information — tips, warnings, important notes, and error notices — using color-coded variants that are instantly recognizable. Each variant applies a distinct border color, tinted background, and icon color, so readers can identify the severity at a glance without reading the label. The component ships with four variants: `info` (blue), `warning` (yellow/orange), `tip` (green), and `error` (red). Each variant sets its own border color, background tint, and icon color via the design token system. The default variant is `info`. The variant color is applied through the container's border-color and a subtle background tint, providing a clear visual anchor that differentiates it from regular card content. The icon slot lets you replace the default emoji icons with custom SVG or icon-font content. The default icon is determined automatically from the variant: info shows an info symbol, warning shows a caution symbol, tip shows a sparkle, and error shows a stop sign. The default content slot accepts any HTML, making it suitable for rich content including inline code, links, and lists.

Guidelines

When to use

Use info for general supplementary information and helpful context
Use warning for actions that could cause unexpected results if ignored
Use error sparingly — reserve it for destructive or irreversible actions
Use tip for best practices, shortcuts, and recommended approaches
Keep callout content concise — one to three sentences is ideal

When not to use

Do not Stack multiple callouts of the same variant back to back — consolidate the content
Do not use callouts for primary page content; they are for supplementary information only
Do not use error for minor notes — overuse dilutes its urgency
Do not remove the icon entirely without providing an alternative visual indicator
Do not nest callouts inside other callouts; the visual nesting is confusing

Features

Four semantic variants: info, warning, tip, and error with distinct color schemes
Automatic default icon per variant (info, caution, sparkle, stop) via _getDefaultIcon()
Variant-colored border and subtle background tint for visual differentiation
Tinted background using rgba alpha on each variant color for subtle emphasis
Icon slot for replacing default emoji icons with custom SVG content
Default content slot accepts rich HTML including links, code, and lists
`role="note"` on the container for assistive technology context
CSS parts (callout, icon, content) for external style overrides

Preview

This API requires authentication. See the setup guide for details.

Use keyboard shortcuts to speed up your workflow.

This feature is deprecated and will be removed in v3.0.

This action permanently deletes all data and cannot be undone.

Usage

<arc-callout variant="info">Informational callout.</arc-callout>
<arc-callout variant="warning">Warning callout.</arc-callout>
<arc-callout variant="tip">Tip callout.</arc-callout>

import { Callout } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Callout variant="info">Informational callout.</Callout>
      <Callout variant="warning">Warning callout.</Callout>
      <Callout variant="tip">Tip callout.</Callout>
    </>
  );
}

<script setup>
import { Callout } from '@arclux/arc-ui-vue';
</script>

<template>
  <Callout variant="info">Informational callout.</Callout>
  <Callout variant="warning">Warning callout.</Callout>
  <Callout variant="tip">Tip callout.</Callout>
</template>

<script>
  import { Callout } from '@arclux/arc-ui-svelte';
</script>

<Callout variant="info">Informational callout.</Callout>
<Callout variant="warning">Warning callout.</Callout>
<Callout variant="tip">Tip callout.</Callout>

import { Component } from '@angular/core';
import { Callout } from '@arclux/arc-ui-angular';

@Component({
  imports: [Callout],
  template: `
    <arc-callout variant="info">Informational callout.</arc-callout>
    <arc-callout variant="warning">Warning callout.</arc-callout>
    <arc-callout variant="tip">Tip callout.</arc-callout>
  `,
})
export class MyComponent {}

import { Callout } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Callout variant="info">Informational callout.</Callout>
      <Callout variant="warning">Warning callout.</Callout>
      <Callout variant="tip">Tip callout.</Callout>
    </>
  );
}

import { Callout } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Callout variant="info">Informational callout.</Callout>
      <Callout variant="warning">Warning callout.</Callout>
      <Callout variant="tip">Tip callout.</Callout>
    </>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-callout — requires callout.css + base.css (or arc-ui.css) -->
<div class="arc-callout">
  <div class="callout" role="note">
   <span class="callout__icon" aria-hidden="true">
   &#x26A0;&#xFE0F;
   </span>
   <div class="callout__content">
   Callout
   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-callout — self-contained, no external CSS needed -->
<div class="arc-callout" style="display: block">
  <div style="position: absolute; display: flex; gap: 16px; padding: 16px 24px; border-radius: 10px; border: 1px solid rgb(34, 34, 41); background: rgb(51, 51, 64); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.7; color: rgb(138, 138, 150); overflow: hidden; content: ''; top: 0; left: 0; right: 0; height: 2px" role="note">
   <span style="flex-shrink: 0; font-size: 18px; line-height: 1.7" aria-hidden="true">
   &#x26A0;&#xFE0F;
   </span>
   <div style="flex: 1; min-width: 0">
   Callout
   </div>
   </div>
</div>

API

variant 'info' | 'tip' | 'warning' | 'error' ='info': Semantic variant that controls the color scheme, top accent bar, and default icon
dismissible boolean =false: Shows a close button that removes the callout. Fires an arc-close event on close.

Events

arc-close: Fired when the dismiss button is clicked on a dismissible callout.

Callout

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight