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