Alert

Um bloco de aviso com semântica de alerta para mensagens importantes.

Instalação

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

shadwire add alert --yes

O item alert do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/alert_component.rb
app/helpers/ui/alert_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_alert do %>
  Heads up! Você pode adicionar componentes ao seu app.
<% end %>

Ou renderize Ui::AlertComponent diretamente:

<%= render Ui::AlertComponent.new(variant: :destructive) do %>
  Erro ao salvar alterações.
<% end %>

Exemplos

Padrão

Mensagem importante com role="alert" por padrão.

Heads up!

Você pode adicionar componentes ao seu app com a CLI.

<%= ui_alert do %>
  <div class="flex gap-3">
    <%= ui_icon("terminal", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Heads up!</p>
      <p class="text-sm text-muted-foreground">Você pode adicionar componentes ao seu app com a CLI.</p>
    </div>
  </div>

<%= ui_alert do %>
  <div class="flex gap-3">
    <%= ui_icon("terminal", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Heads up!</p>
      <p class="text-sm text-muted-foreground">Você pode adicionar componentes ao seu app com a CLI.</p>
    </div>
  </div>
<% end %>

Destrutivo

Use para erros ou avisos de alta severidade.

Erro ao salvar

Revise os campos destacados e tente novamente.

<%= ui_alert(variant: :destructive) do %>
  <div class="flex gap-3">
    <%= ui_icon("circle-alert", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Erro ao salvar</p>
      <p class="text-sm">Revise os campos destacados e tente novamente.</p>
    </div>
  </div>

<%= ui_alert(variant: :destructive) do %>
  <div class="flex gap-3">
    <%= ui_icon("circle-alert", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Erro ao salvar</p>
      <p class="text-sm">Revise os campos destacados e tente novamente.</p>
    </div>
  </div>
<% end %>

Referência da API

ui_alert(**options, &block) encapsula Ui::AlertComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`variant`	Symbol/String	`:default`	`:default` ou `:destructive`.
`role`	String	`"alert"`	Pode ser sobrescrito quando a mensagem não deve ser anunciada imediatamente.
`**attrs`	Hash	`{}`	Atributos HTML livres.