Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Alert

Displays a callout for user attention.

Usage 

<div class="row">

  <ui:Alert dismissible>
    <ui:Alert.Description>
      You can add components to <a href="#">your app</a>
      using dark magic.
    </ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Do it!</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

</div>
<div class="row">

  <ui:Alert title="Heads up!" dismissible>
    <ui:Alert.Description>
      You can add components to your app using dark magic and
      a description of multiple lines of text: Lorem ipsum dolor
      sit amet, consectetur adipiscing elit.
    </ui:Alert.Description>
  </ui:Alert>

</div>
<div class="row">

  <ui:Alert>
    <ui:Alert.Description>
      You can add components to your app using dark magic and
      a description of multiple lines of text: Lorem ipsum dolor
      sit amet, consectetur adipiscing elit.
    </ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Do it!</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

</div>
<div class="row">

  <ui:Alert title="Heads up!" dismissible>
    <ui:Alert.Description>
      You can add components to your app using dark magic.
    </ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Do it!</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

</div>
<div class="row">

  <ui:Alert title="Your health is important" icon="heart_check" dismissible>
    <ui:Alert.Description>Alert with custom icon.</ui:Alert.Description>
  </ui:Alert>

</div>
<div class="row">

  <ui:Alert icon="" dismissible>
    <ui:Alert.Description>Sad, sad alert without an icon.</ui:Alert.Description>
  </ui:Alert>

</div>

Variants 

  <ui:Alert var="critical" dismissible>
    <ui:Alert.Description>Critical: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

  <ui:Alert var="warning" dismissible>
    <ui:Alert.Description>Warning: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

  <ui:Alert var="success" dismissible>
    <ui:Alert.Description>Success: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

  <ui:Alert var="info" dismissible>
    <ui:Alert.Description>Info: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

  <ui:Alert var="option" dismissible>
    <ui:Alert.Description>Option: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

  <ui:Alert var="accent" dismissible>
    <ui:Alert.Description>Accent: Reactor core is overheating!</ui:Alert.Description>
    <ui:Alert.Actions>
      <ui:Button size="small">Button</ui:Button>
      <ui:Button size="small" var="text">Button</ui:Button>
    </ui:Alert.Actions>
  </ui:Alert>

Component arguments 

Alert 

ArgumentTypeDescription
title str Optional. The title of the alert. If empty, the alert will not have a title.
icon str Optional. The name of the icon to use for the alert, pass an empty string to remove the icon. Default is the icon for the variant.
var str Optional. The variant of the alert. Can be one of: info, success, warning, critical, option, or accent. Default is info.
dismissible bool Optional. Wheter to include a button so the user can dismiss the alert. Default is false.

Alert.Description 

No arguments.

Alert.Actions 

No arguments.

Components 

Component
File
Source
Alert
alert/index.jinja
Alert.Description
alert/description.jinja
Alert.Actions
alert/actions.jinja
alert/alert.css