Toast

Explicit notification markup, Rails flash mapping, and pauseable dismissal behavior.

Source
app/components/nitro_kit/toast.rb
API
NitroKit::Toast.new(duration:) { |toast| toast.item }

Variants

Every notification intent renders as explicit server-owned markup.

Intent stack

ViewportFull width
Rubytest/dummy/app/components/gallery/components/toast_page.rb
render NitroKit::Toast.new(
  duration: 600_000,
  label: "Variant examples",
  html: { id: "gallery-toast-variants" }
) do |toast|
  NitroKit::Toast::Item::VARIANTS.each do |variant|
    toast.item(
      title: variant.to_s.humanize,
      description: toast_description(variant),
      variant:
    )
  end
end

Content and dismissal

Title, description, block content, permanent notices, and long messages are independent.

Content combinations

Title only
Permanent
Timed pause
Block content
Long error
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/toast_page.rb
sample("Title only", slug: "title-only") do
  render NitroKit::Toast.new(
    duration: 600_000,
    label: "Title only notification",
    html: { id: "gallery-toast-title-only" }
  ) do |toast|
    toast.item(title: "Workspace saved")
  end
end
sample("Permanent", slug: "permanent") do
  render NitroKit::Toast.new(
    label: "Permanent notification",
    html: { id: "gallery-toast-permanent" }
  ) do |toast|
    toast.item(
      description: "A workspace owner must acknowledge this billing change.",
      variant: :warning,
      dismissible: false
    )
  end
end
sample("Timed pause", slug: "timed-pause") do
  render NitroKit::Toast.new(
    duration: 1_200,
    label: "Timed notification",
    html: { id: "gallery-toast-timed" }
  ) do |toast|
    toast.item(title: "Focus keeps this notification visible")
  end
end
sample("Block content", slug: "block") do
  render NitroKit::Toast.new(
    duration: 600_000,
    label: "Block notification",
    html: { id: "gallery-toast-block" }
  ) do |toast|
    toast.item(title: "Deployment details", variant: :info) do
      p { "Release 2026.07.13 is healthy in fra1 and iad1." }
      render NitroKit::Badge.new(
        "Production",
        id: "gallery-toast-environment",
        color: :success,
        size: :sm
      )
    end
  end
end
sample("Long error", slug: "long-error") do
  render NitroKit::Toast.new(
    duration: 600_000,
    label: "Long error notification",
    html: { id: "gallery-toast-long" }
  ) do |toast|
    toast.item(
      title: "The production deployment could not be promoted",
      description: "The release remains healthy in staging, but the primary database rejected the migration lock. Review the deployment log before retrying.",
      variant: :error
    )
  end
end

Rails flash

Flash rendering receives explicit data and never reaches through a template context.

Flash severity mapping

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/toast_page.rb
render NitroKit::Toast::FlashMessages.new(
  flash: {
    notice: "Welcome back, Ada.",
    success: "Production settings were saved.",
    warning: "The payment method expires next month.",
    alert: "Your session expired; sign in again."
  },
  duration: 600_000,
  label: "Rails flash messages",
  html: { id: "gallery-toast-flash" }
)

Action result composition

A realistic settings result keeps source data, action controls, and notifications explicit.

Saved integration

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/toast_page.rb
render NitroKit::Card.new(id: "gallery-toast-integration-card") do |card|
  card.title("Slack integration", level: 3)
  card.body do
    render NitroKit::Badge.new(
      "Connected",
      id: "gallery-toast-integration-status",
      color: :success
    )
    p { "Deployment notifications post to #operations." }
  end
  card.footer do
    render NitroKit::Button.new(
      "Configure",
      id: "gallery-toast-configure",
      variant: :default
    )
  end
end
render NitroKit::Toast.new(
  duration: 600_000,
  label: "Integration result",
  html: { id: "gallery-toast-integration-result" }
) do |toast|
  toast.item(
    title: "Slack settings saved",
    description: "New deployment notifications will use #operations.",
    variant: :success
  )
end