Toast
Toast are used to notify the user.
File to include
@import "components/toast";Script to include
<script src="/lib/toast.js"></script>Without close button
Content
<div class="toast" data-title="Title" data-icon="check-circle-solid" data-icon-color="success">
<p>Content</p>
</div>With close button
Content
<div class="toast" data-title="Title" data-icon="check-solid" data-icon-color="success" data-close>
<p>Content</p>
</div>Attributes
| Name | Example value | Possible values | Default | Required |
|---|---|---|---|---|
| data-title | You have a new message! | - | Title | Yes |
| data-icon | check-solid | - | None | No |
| data-icon-color | success | "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | primary | No |
| data-close | - | - | None | No, but you can avoid adding it if you add data-icon-close |
| data-icon-close | close-circle-solid | - | close-solid | No |