Callout

MokaCallout is an informational callout/admonition box modeled after GitHub-style alerts. It features a left border accent, colored background tint, auto-mapped icon, and optional close button.

Parameters

Name Type Default Description
ChildContent RenderFragment? -- Callout body content
Title string? -- Title text (defaults to the type name when null)
Type MokaCalloutType Note Note, Tip, Important, Warning, Caution
Icon MokaIconDefinition? -- Custom icon override (auto-mapped from type by default)
Closable bool false Shows a close button
OnClose EventCallback -- Callback when closed
Class string? -- Additional CSS classes
Style string? -- Additional inline styles

Types

Each type has a distinct color accent and default icon.

<div style="display:flex;flex-direction:column;gap:12px">
    <MokaCallout Type="MokaCalloutType.Note">
        This is a note with informational context.
    </MokaCallout>
    <MokaCallout Type="MokaCalloutType.Tip">
        Helpful tip to improve your workflow.
    </MokaCallout>
    <MokaCallout Type="MokaCalloutType.Important">
        Important information you should not miss.
    </MokaCallout>
    <MokaCallout Type="MokaCalloutType.Warning">
        Proceed with caution -- this may have side effects.
    </MokaCallout>
    <MokaCallout Type="MokaCalloutType.Caution">
        Dangerous action that cannot be undone.
    </MokaCallout>
</div>

Custom Title

<MokaCallout Type="MokaCalloutType.Tip" Title="Pro Tip">
    You can use keyboard shortcuts to speed up navigation.
</MokaCallout>

Closable

<MokaCallout Type="MokaCalloutType.Note" Closable>
    This callout can be dismissed by the user.
</MokaCallout>

Custom Icon

<MokaCallout Type="MokaCalloutType.Important" Icon="MokaIcons.Action.Settings">
    Custom icon overrides the default type icon.
</MokaCallout>
Last updated: 2026-04-11
Was this page helpful?