Callout
@xui/calloutA boxed note that draws attention to a piece of text.
Install
pnpm add @xui/callout Add the barrel to a standalone component's imports:
import { XuiCalloutImports } from '@xui/callout';@Component({ imports: [XuiCalloutImports], // …})Examples
Default
Loading preview…
<xui-callout class="max-w-md" color="none" [minimal]="false" [compact]="false" title="Heads up"> Saving will overwrite the existing draft.</xui-callout>Without title
Loading preview…
<xui-callout class="max-w-md" color="none" [minimal]="false" [compact]="false"> Saving will overwrite the existing draft.</xui-callout>Minimal
Loading preview…
<xui-callout class="max-w-md" color="warning" [minimal]="true" [compact]="false" title="Heads up"> Saving will overwrite the existing draft.</xui-callout>Compact
Loading preview…
<xui-callout class="max-w-md" color="info" [minimal]="false" [compact]="true" title="Heads up"> Saving will overwrite the existing draft.</xui-callout>API
A boxed note that draws attention to a piece of text.
Variants
colornoneminimalfalsecompactfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''colorXuiCalloutColorIntent of the callout. Picks the tint, the border and the default icon, and promotes error and warning to role="alert" so they are announced. The input is color, not intent — other libraries call it that, and Angular says nothing about an unknown attribute on a component, so intent="error" renders an untinted callout that is never announced.this.config.colortitlestring | nullOptional heading rendered above the content.nulliconstring | 'none' | nullAn @ng-icons name, or 'none' to suppress the icon the colour would otherwise imply.nullminimalbooleanDrop the tinted fill, keeping only the border — for a callout inside an already-tinted surface.this.config.minimalcompactbooleanTighter padding and smaller text.this.config.compact