Ariadne

Your awesome title docs

FlashComponent

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

Use FlashComponent to inform users of successful messages, pending actions, or urgent notices

Arguments

Name Type Default Description
tag Symbol, String :div The rendered tag name.
dismissible Boolean false Whether the component can be dismissed with an X button.
icon Symbol, String N/A Name of Heroicon to use.
scheme Symbol :default One of :danger, :default, :info, :success, or :warning.
classes String "" Classes and attributes
attributes Hash {} Classes and attributes

Slots

Icon

Optional visuals appearing to the left of the flash banner.

Use:

Action

Optional action content showed at the bottom of the component.

Name Type Default Description
tag Symbol, String N/A The rendered tag name
classes String N/A Classes and attributes
attributes Hash N/A Classes and attributes

Examples

Schemes

<%= render(Ariadne::FlashComponent.new) { "This is a flash message!" } %>
<%= render(Ariadne::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
<%= render(Ariadne::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
<%= render(Ariadne::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>

Dismissible

<%= render(Ariadne::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>

Icon

<%= render(Ariadne::FlashComponent.new) do |component| %>
  <% component.icon(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
  Look at this icon.
<% end %>

With actions

<%= render(Ariadne::FlashComponent.new) do |component| %>
  <% component.action do %>
    <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Take action" } %>
  <% end %>
  This is a flash message with actions!
<% end %>

Have questions?

Still have questions? Talk to support.

Previous
DropdownComponent
Next
FlexComponent