Components
Callout
BetaA boxed message with a left border accent used to surface tips, informational notes, warnings, and important notices inline with content.
Info
Your holiday price is guaranteed at the time of booking. No hidden fees.
Purpose
A Callout draws the reader's eye to a short piece of supporting content that sits alongside — but is not part of — the primary flow. Four semantic variants map to four levels of urgency, so travellers and agents can immediately judge how much attention a message deserves before reading it.
Usage
Use a Callout when a single sentence or short paragraph needs to stand out from surrounding body text: a pricing guarantee, a visa reminder, a departure deadline, or a critical warning about booking conditions. Callouts are passive notices, not dismissible alerts — for time-based system messages that appear and disappear, use Alert instead.
Callouts sit inline within article or product-detail content, near the specific paragraph or field they annotate — not at the top of the page like a Banner or Alert.
Anatomy
Packing tip
Lightweight luggage qualifies for priority boarding on most long-haul routes.
Warning
Passport validity must exceed six months beyond your return date.
- 1Left border accent — A 4 px solid vertical stripe in the variant colour. The primary visual signal that differentiates a callout from body text.
- 2Icon — A 20 px icon drawn from the variant colour. Reinforces the semantic meaning alongside colour for users who cannot distinguish hues.
- 3Title — A short label in semi-bold weight. Defaults to the variant name (Tip, Info, Warning, Important) but can be overridden with the title prop for more specific guidance.
- 4Body content — The callout message, passed as children. Supports inline text, links, and simple formatted runs. Keep to one or two sentences.
Variants
Tip
Book early to secure your preferred room category — availability is limited in peak season.
Info
Your holiday price is guaranteed at the time of booking. No hidden fees.
Warning
Passport validity must exceed six months beyond your return date.
Important
Final payment is due 12 weeks before departure. Failure to pay may result in cancellation.
| Variant | Border | Background | Icon | Role |
|---|---|---|---|---|
tip | border-kuoni-yellow | bg-grey-50 | Lightbulb | — |
info | Teal | bg-teal-50 | Info circle | — |
warning | Warning colour | Warning bg | AlertTriangle | — |
important | Danger colour | Danger bg | AlertCircle | alert |
warning and important callouts render with role="alert" so screen readers announce them immediately when they appear in the DOM.
Overriding the title
The title prop replaces the default variant label with a more specific heading. Use this when the default label is too generic for the context.
Book early
Securing your place now locks in today's price — prices rise as departure approaches.
Visa required
Australian citizens require a visa for Sri Lanka. Processing takes up to 14 business days.
States
Callout is a purely presentational component with no interactive states. It does not respond to hover, focus, or active events.
The only state variation is whether the component has appeared in the DOM since page load. When variant="warning" or variant="important" callouts are injected dynamically — for example, when a validation error is revealed after a form submission — role="alert" ensures the content is announced immediately without needing aria-live on the parent.
Best practices
Use the variant that matches the urgency: tip for optional enhancement, info for neutral context, warning for required attention, important for blocking conditions.
Reserve callouts for content the reader must not miss — pricing terms, visa requirements, booking deadlines.
Place callouts after every paragraph or use them as a general-purpose highlight block for interesting content.
If every paragraph has a callout, none of them stand out. Overuse trains readers to skip them.
Keep the callout body to one or two sentences addressing a single topic.
One focused message is easier to act on than a list of loosely related points.
Write multi-paragraph callouts or use them to hold bullet lists of unrelated information.
A callout is not a content section. Long callouts break reading flow and should be moved into the main content.
Use the title prop to give context-specific headings: 'Visa required', 'Price guarantee', 'Payment deadline'.
The title override makes a callout significantly more scannable in a content-dense page.
Leave the title as the default variant name when a more descriptive heading is available.
'Warning' and 'Important' are generic — they tell the reader nothing about what to act on.
Include a relevant link in the body when the callout references an external resource or next step.
Inline links within callout body text let travellers act immediately — e.g. a link to the visa application portal.
End a callout body with a vague cross-reference that forces the user to hunt for the information.
A callout that says 'See below' with no link or direct next step leaves the reader searching.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'tip' | 'info' | 'warning' | 'important' | 'info' | Controls the left border colour, background tint, and icon. 'warning' and 'important' also add role='alert'. |
| title | string | Variant label | Overrides the default variant label (Tip, Info, Warning, Important) with a custom heading. Keep to three to five words. |
| children* | ReactNode | — | The callout body. Accepts text, inline elements, and links. Keep to one or two sentences. |
| className | string | — | Additional Tailwind classes merged onto the root element for spacing overrides. |
Accessibility
Role and live regions
tip and info callouts have no ARIA role — they are informational and do not require immediate announcement. warning and important callouts render with role="alert", which is an implicit aria-live="assertive" region. This means:
- If the callout is present on page load, screen readers will announce it when focus reaches it naturally.
- If the callout is injected dynamically (e.g. revealed after a failed payment attempt), the content is announced immediately.
Do not add an extra aria-live attribute on the parent — role="alert" already handles this and double-wrapping can cause duplicate announcements.
Colour and icons
Every variant pairs a named icon with a coloured border. This ensures that the semantic meaning is available to users who cannot distinguish the border colour. Never remove the icon in a custom implementation.
Contrast
All callout colour combinations meet WCAG 2.1 AA for normal text at the default font size.
| Variant | Text colour | Background | Ratio |
|---|---|---|---|
tip | #1A1A1A (dark) | #FAFAFA (grey-50) | 18.1:1 |
info | Teal-700 | Teal-50 | 5.2:1 |
warning | Warning-700 | Warning-50 | 4.6:1 |
important | Danger-700 | Danger-50 | 4.8:1 |
Focus management
Callout has no interactive elements by default. If you place a link inside the body, ensure it meets the standard link focus style requirements (visible :focus-visible outline).