Alerts
Colors
Success
Error
Warning
Info
Primary
Tertiary
Accent
Secondary
<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
Top
Bottom
Right
Left
<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
Outlined
Text
<Alert type="success" outlined="true">Outlined</Alert> <Alert type="success" text="true">Dense</Alert>
Prominent and Dense
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.
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
Tile
Info Text
Shaped
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
Warning
Success
<Alert border="bottom" coloredBorder="true" type="warning" elevation="2">Warning</Alert> <Alert border="left" coloredBorder="true" type="success" elevation="2">Success</Alert>
Dismissible
I'm
a
success alert.
I'm a success alert.
<Btn if="!$showAlert" color="accent" (click)="$showAlert = true">Reset</Btn> <Alert type="success" dismissible="true" active="$showAlert" (onDismiss)="$showAlert = $event">I'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'm a success alert.</Alert>