Sonner

Notificações temporárias empilhadas numa região aria-live polite. Dispare com window.toast ou pelo Stimulus.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add sonner --yes

O item sonner do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/sonner_component.rb
app/helpers/ui/sonner_helper.rb
app/javascript/controllers/ui_sonner_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%# Put one toaster in the layout… %>
<%= ui_sonner %>

<%# …and fire it from anywhere. %>
<%= ui_button(data: { action: "click->ui-sonner#toast",
      "ui-sonner-title-param": "Event created",
      "ui-sonner-description-param": "Sunday at 9:00 PM." }) { "Show toast" } %>

Exemplos

Padrão

As variantes padrão, sucesso, erro e com ação.

<%= ui_sonner do %>
  <div class="flex flex-wrap gap-2">
    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Evento criado",
          "ui-sonner-description-param": "Domingo, 25 de junho, às 21h." }) { "Mostrar toast" } %>

    <%= ui_button(variant: :outline, data: {

<%= ui_sonner do %>
  <div class="flex flex-wrap gap-2">
    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Evento criado",
          "ui-sonner-description-param": "Domingo, 25 de junho, às 21h." }) { "Mostrar toast" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-variant-param": "success",
          "ui-sonner-title-param": "Tudo certo!",
          "ui-sonner-description-param": "Suas alterações foram salvas." }) { "Sucesso" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-variant-param": "error",
          "ui-sonner-title-param": "Algo deu errado",
          "ui-sonner-description-param": "Não foi possível salvar o registro." }) { "Erro" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Arquivo movido para a lixeira",
          "ui-sonner-action-label-param": "Desfazer" }) { "Com ação" } %>
  </div>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Sonner`	`position`	`:bottom_right`	Onde os toasts se empilham: `:top_left`, `:top_center`, `:top_right`, `:bottom_left`, `:bottom_center` ou `:bottom_right`.
`Sonner`	`duration`	`4000`	Quantos milissegundos um toast fica na tela antes de sumir sozinho.