Component Library

Dropdowns

The dropdown component lets you create a toggleable menu for a list of links or actions.

You can create a dropdown component by wrapping the trigger and menu within a .dropdown. Your trigger can be anything from a button to a link – just add the [data-toggle="dropdown"] attribute.

<div class="dropdown">
  <button type="button" id="thingy" class="btn" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-primary" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-success" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-danger" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-link" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>

Alignment

By default, dropdown menus are automatically aligned along the left side of its parent. You can change the positioning to the right side by adding .right to .dropdown-menu.

<div class="dropdown">
  <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu right">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
  </ul>
</div>

Divider

Need to add some spacing to your menu? You can add a .divider class to a li element to separate different series of links.

<div class="dropdown">
  <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>

Caret

The caret on the drop down menu can be positions on the right as well or on both side of the dropm down if appropriate.

<div class="dropdown">
  <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span> Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>
<div class="dropdown">
  <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span> Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>

Split Dropdown

If you need to split the action for a button and other options on the drop down you can do that.

<div class="dropdown">
  <div class="btn-group">
    <button type="button" class="btn">Save</button>
    <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Save</button>
    <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-primary" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="btn-group">
    <button type="button" class="btn btn-success">Save</button>
    <button type="button" class="btn btn-success" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Save</button>
    <button type="button" class="btn btn-danger" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">Bacon</a></li>
    <li><a href="#">Ham</a></li>
    <li><a href="#">Sausage</a></li>
    <li class="divider"></li>
    <li><a href="#">Bacon &amp; Eggs</a></li>
  </ul>
</div>

Navs

– todo –

Navbar

<nav class="navbar" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a href="#">Association Name</a>
    </div>
    <ul class="nav">
      <li><a class="nav--active" href="#">Active Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

Alerts

Show alerts to a user informing them of successful or pending actions, or state. These should be used sparingly and very rarely more than one at once.

Info

<div class="alert alert-info">
    <i class="alert-icon fa-regular fa-circle-info"></i>
    <strong>FYI. </strong>
    This person doesn't have any notes.
    <a href="#"> Create note</a>
</div>

Success

<div class="alert alert-success">
    <i class="alert-icon fa-regular fa-circle-check"></i>
    <strong>Good Job! </strong>
    You are all done with this member.
    <a href="#"> Go to member</a>
</div>

Error

<div class="alert alert-error">
    <i class="alert-icon fa-regular fa-circle-xmark"></i>
    <strong>Oops! </strong>
    Something went terribly wrong.
    <a href="#"> Emergency Meeting!</a>
</div>

Warning

<div class="alert alert-warning">
    <i class="alert-icon fa-regular fa-triangle-exclamation"></i>
    <strong>Heads Up! </strong>
    Your membership is about to expire pretty soon.
    <a href="#"> Re-Sub!</a>
</div>

Modals

Modal components can be used as a pop up dialog to allow for hidden actions to be performed on a page.

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="modalTitle">
  <div id="modalTitle" class="modal-header">
    You Must Answer These Questions Three
    <button class="close" aria-label="Close" data-dismiss="modal"></button>
  </div>
  <div class="modal-body" role="document">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" data-dismiss="modal">Nevermind</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal">Yes, Do It</button>
  </div>
</div>

Modals can be toggled by adding a data-toggle="modal" attribute along with a `data-target=”#target” attributed pointed to your modal.

<button type="button" class="btn" data-toggle="modal" data-target="#modal">Open Modal</button>
<div class="modal" id="modal" role="modal">
  <div class="modal-header">This is a modal <div class="close" data-dismiss="modal"></div></div>
  <div class="modal-body">Hello Modal!</div>
</div>

Lists

Need to create a list component? Use .list. Each list item should additionally have .list-item for consistent padding.

<ul class="list">
  <li class="list-item">List Item</li>
  ...
</ul>

You can also use list items in combination with <a> elements to create interactive list components with icons.

<ul class="list">
  <li>
    <a href="#" class="list-item">
      List Item
      <div class="list-icons pull-right tooltip" aria-label="Edit"><span class="icon-pencil"></span></div>
    </a>
  </li>
  ...
</ul>

Bordered Lists

If you need borders around the list, use .list-bordered.

<ul class="list list-bordered">
  <li class="list-item">List Item</li>
  ...
</ul>

List Header

You can also have a list header by including a preceding element with a .list-header class.

<div class="list-header">List Header</div>
<ul class="list">
  <li class="list-item">List Item</li>
  ...
</ul>

<div class="list-header list-header-bordered">List Header</div>
<ul class="list list-bordered">
  <li class="list-item">List Item</li>
  ...
</ul>

Button Groups

You can create button groups driven by checkboxes and radio buttons – no javascript needed!

To select a button, just add a checked attribute to the checkbox or radio button you want to be selected.

Checkbox Group

Use checkboxes when you need a button group where multiple items can be selected at a time.

<div class="btn-group">
  <input id="sunday" type="checkbox" />
  <label for="sunday" class="btn">Sunday</label>
  <input id="monday" type="checkbox" />
  <label for="monday" class="btn">Monday</label>
  ...
  <input id="saturday" type="checkbox" />
  <label for="saturday" class="btn">Saturday</label>
</div>

Radio Group

Use radio buttons when you need a button group where only one item can be selected at a time.

<div class="btn-group">
  <input id="level-anyone" type="radio" name="level" checked />
  <label for="level-anyone" class="btn">Anyone</label>
  <input id="level-intermediate" type="radio" name="level" />
  <label for="level-intermediate" class="btn">Intermediate</label>
  <input id="level-advanced" type="radio" name="level" />
  <label for="level-advanced" class="btn">Advanced</label>
</div>

Tabs

Horizontal Tabs

<ul class="tabs">
  <li class="active"><a href="#">Tab A</a></li>
  <li><a href="#">Tab B</a></li>
  <li><a href="#">Tab C</a></li>
  <li><a href="#">Tab D</a></li>
</ul>

Vertical Tabs

By default, vertical tabs will display on the left and will take up the full width of the container you place them in.

<ul class="tabs tabs-vertical">
  <li class="active"><a href="#">Tab A</a></li>
  <li><a href="#">Tab B</a></li>
  <li><a href="#">Tab C</a></li>
  <li><a href="#">Tab D</a></li>
</ul>

You can also have vertical tabs displayed on the right by adding a .right class.

<ul class="tabs tabs-vertical right">
  <li class="active"><a href="#">Tab A</a></li>
  <li><a href="#">Tab B</a></li>
  <li><a href="#">Tab C</a></li>
  <li><a href="#">Tab D</a></li>
</ul>

Vertical tabs can also have sub navigation items.

<ul class="tabs tabs-vertical right">
  <li class="active"><a href="#">Tab A</a></li>
  <li><a href="#">Tab B</a>
    <ul>
      <li><a href="#">Sub-Tab A</a></li>
      <li><a href="#">Sub-Tab B</a></li>
      <li><a href="#">Sub-Tab C</a></li>
    </ul>
  </li>
  <li><a href="#">Tab C</a></li>
  <li><a href="#">Tab D</a></li>
</ul>

Since tabs don’t have a implicit width, you may want to consider placing them in a grid to align along side your content.

<div class="grid">
  <div class="col-3">
    <ul class="tabs tabs-vertical">
      <li class="active"><a href="#">Tab A</a></li>
      <li><a href="#">Tab B</a></li>
      <li><a href="#">Tab C</a></li>
      <li><a href="#">Tab D</a></li>
    </ul>
  </div>
  <div class="col-9">
    <div class="tab-panel">
      -- tab content goes here --
    </div>
  </div>
</div>

Toggle Switches

Toggle switches are used in place of regular checkboxes to indicate the on/off state of a checkbox. They also provide a larger hit area for mobile devices and are the preferred way to display single checkboxes.

<label class="toggle-switch">
  <input type="checkbox" />
  <span class="switch"></span>
  <span data-on="Active" data-off="Inactive"></span>
</label>

To display a smaller toggle just change the class

<label class="toggle-switch toggle-switch-small">
  <input type="checkbox" />
  <span class="switch"></span>
  <span data-on="Active" data-off="Inactive"></span>
</label>

To display a toggle switch as active, just set the checked property on the checkbox.

<label class="toggle-switch">
  <input type="checkbox" checked />
  <span class="switch"></span>
  <span data-on="Active" data-off="Inactive"></span>
</label>

To disable a toggle switch add the disabled property to the check box

<label class="toggle-switch">
  <input type="checkbox" disabled />
  <span class="switch"></span>
  <span data-on="Active" data-off="Inactive"></span>
</label>

Disabled also works on active toggle switches

<label class="toggle-switch">
  <input type="checkbox" disabled checked />
  <span class="switch"></span>
  <span data-on="Active" data-off="Inactive"></span>
</label>

Tooltips

Add tooltips to almost any element. Just add a .tooltip class along with an aria-label attribute containing the tooltip text.

Tooltips can not be added to elements that have :before or :after psuedo elements. If you need a tooltip on an element with psuedo-elements, you will need to add the tooltip to the parent instead.

<button class="btn tooltip" aria-label="This is a tooltip for the button">Button with Tooltip</button>

You can also specify the direction of the tooltip:

• tooltip-n – tooltip on top
• tooltip-e – tooltip on right
• tooltip-s – tooltip on bottom
• tooltip-w – tooltip on left

<span class="tooltip tooltip-n" aria-label="I'm on the top!">Tooltip on top</span>
<span class="tooltip tooltip-e" aria-label="I'm on the right!">Tooltip on right</span>
<span class="tooltip tooltip-s" aria-label="I'm on the bottom!">Tooltip on bottom</span>
<span class="tooltip tooltip-w" aria-label="I'm on the left!">Tooltip on left</span>

Status Flag

Status flags are used to indicate active or inactive status for anything that may have a status. For accessibility purposes, it’s recommended to include the status text along with the flag, or include it as an aria-label tooltip.

<span class="status-flag tooltip" aria-label="Inactive"></span> Inactive
<span class="status-flag status-flag--active tooltip" aria-label="Active"></span> Active
<span class="status-flag status-flag--on-hold tooltip" aria-label="On Hold"></span> On Hold
<span class="status-flag status-flag--prospect tooltip" aria-label="Prospect"></span> Prospect
<span class="status-flag status-flag--danger tooltip" aria-label="Danger"></span> Danger

Labels

Regular Labels

<span class="label label-default">Default</span>
<span class="label label-green">Green</span>
<span class="label label-blue">Blue</span>
<span class="label label-orange">Orange</span>
<span class="label label-red">Red</span>
<span class="label label-light">Light</span>

Uppercase Labels

<span class="label label-uppercase label-default">Default</span>
<span class="label label-uppercase label-green">Green</span>
<span class="label label-uppercase label-blue">Blue</span>
<span class="label label-uppercase label-orange">Orange</span>
<span class="label label-uppercase label-red">Red</span>
<span class="label label-uppercase label-light">Light</span>

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  Look I'm in a well
</div>

Panel

Use the panel as a simple container with a header to call out something or use with other components like a WYSIWYG.

<div class="panel">
  <div class="panel-header">
    Panel Header Area
  </div>
  <div class="panel-body">
    <h2>Maecenas Faucibus</h2>
    <p>Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.</p>
  </div>
</div>

Popovers

Highly customizable vanilla JS tooltip/popover based on Tippy.js. https://atomiks.github.io/tippyjs/
Make sure to include the popover.js file and initialize

<script src="path/to/popover.js"></script>
<script>
  popover('.popover')
</script>

Default

<button class="popover btn" title="I'm a popover!" data-popover-arrow="true">Hover on me!</button>

Placement

<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="top">Top</button>
<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="bottom">Bottom</button>
<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="left">Left</button>
<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="right">Right</button>
<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="top-start">Top-Start</button>
<button class="popover btn" title="I'm a Popover!" data-popover-arrow="true" data-popover-placement="top-end">Top-End</button>

HTML Template

<a class="popover-with-html">HTML Templates</a>
<div id="myHtml" class="panel hide">
  <div class="panel-header">
    <h3>Panel Header Area</h3>
    <button class="close" aria-label="Close" data-dismiss="modal"></button>
  </div>
  <div class="panel-body">
    <h2>Maecenas Faucibus</h2>
    <p>Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  </div>
</div>

Toasts

Customized toast notifications built on top of toastify.js. Make sure to inlcude Toastify JS and the toast.js script to allow for easy use of toast messages.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="path/to/toast.js"></script>

Default

These are all of the different kind of toasts that can be used. They are linked to the buttons using the ID for the toast message and the data-toast-id attribute on the corresponding button that should launch this toast message.

<button class="btn" onClick="createToast('#success-toast')">Success</button>
<button class="btn" onClick="createToast('#info-toast')">Info</button>
<button class="btn" onClick="createToast('#warning-toast')">Warning</button>
<button class="btn" onClick="createToast('#danger-toast')">Danger</button>
<button class="btn" onClick="createToast('#secondary-toast')">Secondary</button>

<div class="dax-toast dax-toast-success" id="success-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-check"></i>
    <div class="dax-toast-title">Save Successful</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="info-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Heads Up</div>
  </div>
</div>
<div class="dax-toast dax-toast-warning" id="warning-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-triangle-exclamation"></i>
    <div class="dax-toast-title">Warning</div>
  </div>
</div>
<div class="dax-toast dax-toast-danger" id="danger-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-xmark"></i>
    <div class="dax-toast-title">Danger</div>
  </div>
</div>
<div class="dax-toast dax-toast-secondary" id="secondary-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Deleted</div>
  </div>
</div>

Positions

A toast message’s location on the screen can be modified by using the data attributes on the toast message. data-gravity can be set to "top" or "bottom" to change if it appears at the top or bottom of the screen. data-position can be set to "left", "center", or "right" to chnage where it appears horizontally on the screen. If not specified this will default to gravity = "top" and position = "right".

<button class="btn" onClick="createToast('#top-left-toast')">Top Left</button>
<button class="btn" onClick="createToast('#top-center-toast')">Top Center</button>
<button class="btn" onClick="createToast('#top-right-toast')">Top Right</button>
<button class="btn" onClick="createToast('#bottom-left-toast')">Bottom Left</button>
<button class="btn" onClick="createToast('#bottom-center-toast')">Bottom Center</button>
<button class="btn" onClick="createToast('#bottom-right-toast')">Bottom Right</button>

<div class="dax-toast dax-toast-info" id="top-left-toast" data-gravity="top" data-position="left">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Top Left</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="top-center-toast" data-gravity="top" data-position="center">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Top Center</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="top-right-toast" data-gravity="top" data-position="right">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Top Right</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="bottom-left-toast" data-gravity="bottom" data-position="left">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Bottom Left</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="bottom-center-toast" data-gravity="bottom" data-position="center">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Bottom Center</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="bottom-right-toast" data-gravity="bottom" data-position="right">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Bottom Right</div>
  </div>
</div>

Timeout

The display duration of the toast message defaults to 5 seconds but can be changed using the data-duration option. Duration should be a number of milliseconds to display the toast message.

<button class="btn" onClick="createToast('#ten-duration-toast')">10 seconds</button>
<button class="btn" onClick="createToast('#thirty-duration-toast')">30 seconds</button>
<button class="btn" onClick="createToast('#sixty-duration-toast')">60 seconds</button>

<div class="dax-toast dax-toast-info" id="ten-duration-toast" data-duration="10000">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">10 seconds</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="thirty-duration-toast" data-duration="30000">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">30 seconds</div>
  </div>
</div>
<div class="dax-toast dax-toast-info" id="sixty-duration-toast" data-duration="60000">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">60 seconds</div>
  </div>
</div>

Buttons

Buttons can also be added to a toast message as part of the title.

<button class="btn" onClick="createToast('#with-button-toast')">Toast With Undo</button> 

<div class="dax-toast dax-toast-secondary" id="with-button-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Note Deleted</div>
    <div class="dax-toast-btn btn btn-link">UNDO</div>
  </div> 
</div>

Body

Body text for more explanation can also be added to a toast message.

<button class="btn" onClick="createToast('#with-body-toast')">Toast With Body</button> 
<button class="btn" onClick="createToast('#with-body-undo-toast')">Toast With Body and Undo</button> 

<div class="dax-toast dax-toast-secondary" id="with-body-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Note Deleted</div>
    <div class="dax-toast-body">Text description would go here and could span multiple lines</div>
  </div> 
</div>
<div class="dax-toast dax-toast-secondary" id="with-body-undo-toast">
  <div class="dax-toast-inner">
    <i class="dax-toast-icon fa-regular fa-circle-info"></i>
    <div class="dax-toast-title">Note Deleted</div>
    <div class="dax-toast-btn btn btn-link">UNDO</div>
    <div class="dax-toast-body">Text description would go here and could span multiple lines</div>
  </div> 
</div>