SutraUI.Flash (Sutra UI v0.2.0)

View Source

Flash notification component for displaying temporary messages.

Flash messages are used to provide feedback to users after actions, such as form submissions, errors, or successful operations.

Examples

# Basic flash messages
<.flash kind={:info} flash={@flash} />
<.flash kind={:error} flash={@flash} title="Error!" />

# With custom content via inner_block
<.flash kind={:info}>
  Custom message with <strong>formatting</strong>
</.flash>

Flash Kinds

KindUsageIcon
:infoSuccess messages, confirmations, general informationinfo icon
:errorError messages, validation failures, warningscircle-alert icon

Setting Flash Messages

In LiveView, use put_flash/3:

def handle_event("save", params, socket) do
  case save_data(params) do
    {:ok, _} ->
      {:noreply, put_flash(socket, :info, "Changes saved successfully")}
    {:error, _} ->
      {:noreply, put_flash(socket, :error, "Failed to save changes")}
  end
end

In controllers, use put_flash/3 from Phoenix.Controller:

def create(conn, params) do
  case create_resource(params) do
    {:ok, resource} ->
      conn
      |> put_flash(:info, "Created successfully")
      |> redirect(to: ~p"/resources/#{resource}")
    {:error, _} ->
      conn
      |> put_flash(:error, "Failed to create")
      |> render(:new)
  end
end

Accessibility

The flash component follows WAI-ARIA alert pattern guidelines:

FeatureImplementation
Rolerole="alert" announces content to screen readers immediately
Close buttontype="button" with aria-label="close"
IconsDecorative icons hidden from screen readers via aria-hidden
DismissalClick anywhere on flash or close button to dismiss

JS Helpers

The module exports show/2 and hide/2 functions for animated visibility:

# Show with animation
SutraUI.Flash.show("#my-element")

# Hide with animation  
SutraUI.Flash.hide("#my-element")

# Chain with other JS commands
JS.push("event") |> SutraUI.Flash.hide("#flash")

Summary

Functions

flash(assigns)

Renders a flash message.

hide(js \\ %JS{}, selector)

Hides an element with a fade and scale animation.

show(js \\ %JS{}, selector)

Shows an element with a fade and scale animation.

Functions

flash(assigns)

Renders a flash message.

Flash messages automatically hide when clicked or when the close button is pressed. They also clear the flash from the socket.

Attributes

AttributeTypeDefaultDescription
idstring"flash-{kind}"Unique identifier for the flash element
flashmap%{}The flash map from socket assigns
titlestringnilOptional title displayed above the message
kindatomrequired:info or :error - determines styling and icon

Slots

SlotDescription
inner_blockOptional custom content (overrides flash message lookup)

Examples

# Basic usage - reads message from flash map
<.flash kind={:info} flash={@flash} />

# With title
<.flash kind={:error} flash={@flash} title="Validation Error" />

# With custom content (ignores flash map)
<.flash kind={:info}>
  Your file <strong>report.pdf</strong> has been uploaded.
</.flash>

# Standalone error (no flash map needed when using inner_block)
<.flash kind={:error} title="Connection Lost">
  Please check your internet connection.
</.flash>

Attributes

  • id (:string) - The id of the flash container. Defaults to nil.
  • flash (:map) - The flash map from the socket. Defaults to %{}.
  • title (:string) - Optional title for the flash. Defaults to nil.
  • kind (:atom) (required) - Used for styling and flash lookup. Must be one of :info, or :error.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • inner_block - The optional inner block that renders the flash message.

hide(js \\ %JS{}, selector)

Hides an element with a fade and scale animation.

Parameters

ParameterTypeDescription
jsPhoenix.LiveView.JSOptional JS struct to chain commands
selectorstringCSS selector for the element to hide

Examples

# Basic usage
hide("#my-modal")

# Chain with other commands
JS.push("close") |> hide("#modal")

Animation

  • Duration: 200ms ease-in
  • From: opacity-100 translate-y-0 scale-100
  • To: opacity-0 translate-y-4 scale-95

show(js \\ %JS{}, selector)

Shows an element with a fade and scale animation.

Parameters

ParameterTypeDescription
jsPhoenix.LiveView.JSOptional JS struct to chain commands
selectorstringCSS selector for the element to show

Examples

# Basic usage
show("#my-modal")

# Chain with other commands
JS.push("open") |> show("#modal")

Animation

  • Duration: 300ms ease-out
  • From: opacity-0 translate-y-4 scale-95
  • To: opacity-100 translate-y-0 scale-100