Alerts

Colors

<Alert type="success">Success</Alert>
<Alert type="error">Error</Alert>
<Alert type="warning">Warning</Alert>
<Alert type="info">Info</Alert>
<Alert type="primary">Primary</Alert>
<Alert type="tertiary">Tertiary</Alert>
<Alert type="accent">Accent</Alert>
<Alert type="secondary">Secondary</Alert>

Border

<Alert type="success" border="top">Top</Alert>
<Alert type="error" border="bottom">Bottom</Alert>
<Alert type="warning" border="right">Right</Alert>
<Alert type="info" border="left">Left</Alert>

Outlined and Text

<Alert type="success" outlined="true">Outlined</Alert>
<Alert type="success" text="true">Dense</Alert>

Prominent and Dense

<Alert border="bottom" prominent="true" type="warning">
    Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien,
    a accumsan nisi mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
</Alert>
<Alert dense="true" type="warning">Dense</Alert>

Tile, Shaped and No Icon

<Alert type="success" tile="true">Tile</Alert>
<Alert type="info" tile="true" border="left" text="true">Info Text</Alert>
<Alert border="top" type="success" shaped="true">Shaped</Alert>
<Alert border="top" type="info" shaped="true" icon="false">No icon</Alert>

Colored border and Elevation

<Alert border="bottom" coloredBorder="true" type="warning" elevation="2">Warning</Alert>
<Alert border="left" coloredBorder="true" type="success" elevation="2">Success</Alert>

Dismissible

<Btn if="!$showAlert" color="accent" (click)="$showAlert = true">Reset</Btn>
<Alert type="success" dismissible="true" active="$showAlert" (onDismiss)="$showAlert = $event">I&apos;m a success alert.</Alert>

<Btn if="!$showAlert2" color="accent" (click)="$showAlert2 = true">Reset</Btn>
<Alert type="success" dismissible="true" text="true" active="$showAlert2" (onDismiss)="$showAlert2 = false">I&apos;m a success alert.</Alert>