Construct an tag label

"My Tag"
  |> Ui.Indicator.tag
  |> Ui.render


--> <span class="tag" role="note">My Tag</span>

• HTML tag: <span>
• ARIA role: note
• Element class: .tag
• Available modifiers: color, size, style, grouping
• Bulma CSS reference: http://bulma.io/documentation/elements/tag/

Construct a notification block

"You are awesome."
  |> Ui.Indicator.notification
  |> Ui.render


--> <div class="notification" role="alert">You are awesome.</div>

• HTML tag: <div>
• ARIA role: alert
• Element class: .notification
• Available modifiers: color
• Bulma CSS reference: http://bulma.io/documentation/elements/notification/

Construct a progress bar

15
  |> Ui.Indicator.progress
  |> Ui.render


--> <progress class="progress" value="15" max="100">15%</progress>

• HTML tag: <progress>
• ARIA role: progressbar (element default)
• Element class: .progress
• Available modifiers: color, size
• Bulma CSS reference: http://bulma.io/documentation/elements/progress/

Add a delete button to a tag or notification

"You are awesome."
  |> Ui.Indicator.notification
  |> Ui.Indicatior.withDelete HideNotification
  |> Ui.render


--> <div class="notification" role="alert">
--    <button class="delete" aria-label="Hide notification"></button>
--    You are awesome.
--  </div>

• HTML tag: <button>
• ARIA role: button (element default)
• ARIA attribute: aria-label: Assigned a label corresponding to the element class of the parent ("Remove tag", "Dismiss notification", or "Delete" as a default)
• Element class: .delete
• Available modifiers: none available when using this constructor
• Bulma CSS reference: http://bulma.io/documentation/elements/delete/#combinations