Toast

Does it smell burnt in here?

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Example

<html data-controller="nk--toast">
  <body>
    <!-- ... -->
    <%= nk_button "Do the thing",
          data: { **nk_toast_action(title: "Hi", description: "There") } %>
    <!-- ... -->
    <%= nk_toast %>
  </body>
</html>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add toast

Files generated

Flash messages

The Toast component comes with a built-in mechanism to show your application's flash messages.

Consider these Turbo enabled actions:

<%= nk_button_to "Eat hotdog", hotdog_path %>
<%= nk_destructive_button_to "Throw away hotdog", flash_path, method: :delete %>

Your controller sets the message:

class HotdogsController < ApplicationController
  def create
    respond_to do |format|
      format.turbo_stream { flash.now[:notice] = "Hope it was good!" }
    end
  end
end

And your action notifies NitroKit::Toast to pick it up.

In create.turbo_stream.erb:

<%= nk_toast_turbo_stream_refresh %>

Variants

:default

Default

Your message

:success

Success

Your message

:warning

Warning

Your message

:error

Error

Your message

<div class="flex flex-col flex-1 gap-8 py-4">
  <div class="space-y-4">
    <% %i[default success warning error].each do |variant| %>
      <p class="text-sm"><code><%= variant.inspect %></code></p>
      <%= render NitroKit::Toast::Item.new(title: variant.to_s.titleize, description: "Your message", variant: variant, data: {state: "preview"}, class: "opacity-100") %>
    <% end %>
  </div>
</div>

Usage

Add data-controller="nk--toast" to the <html> tag.
Add <%= nk_toast %> to bottom of your <body> tag.

`nk_toast(variant: :default, **attrs) { \|toast\| ... }`
Property	Default	Description
`variant`	`:default`	One of `:default` / `:warning` / `:error` / `:success`
`**attrs`		HTML attributes for `<div>` element

`toast.item(title: nil, description: nil, **attrs)`
Property	Default	Description
`title`	`nil`	Title of the item
`description`	`nil`	Body text of the item
`**attrs`		HTML attributes for `<li>` element

`nk_toast_action(title: nil, description: nil)`
Property	Default	Description
`title`	`nil`	Plain text content
`description`	`nil`	Plain text content
`event`	`nil`	JavaScript event that should trigger. Defaults to the default for the element.
Use to add toasts from Stimulus events

`nk_toast_turbo_stream_refresh()`
Property	Default	Description
Use in your TurboStream responses to flush and show flash messages