Callout — ARC UI

Components

Callout

content

static

<arc-callout>

Overview

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 danger 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

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

Features

Four semantic variants: info, warning, tip, and danger with distinct colour schemes
Automatic default icon per variant (info, caution, sparkle, stop) via _getDefaultIcon()
Variant-coloured border and subtle background tint for visual differentiation
Tinted background using rgba alpha on each variant colour 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';

<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: `
    <Callout variant="info">Informational callout.</Callout>
    <Callout variant="warning">Warning callout.</Callout>
    <Callout variant="tip">Tip callout.</Callout>
  `,
})
export class MyComponent {}

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

<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';

<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

Prop	Type	Default	Description
`variant`	`'info' \| 'warning' \| 'tip' \| 'danger'`	`'info'`	Semantic variant that controls the colour scheme, top accent bar, and default icon
`dismissible`	`boolean`	`false`	Shows a close button that removes the callout. Fires an arc-dismiss event on close.

Events

Event	Description
`arc-dismiss`	Fired when the dismiss button is clicked on a dismissible callout.