BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div data-controller="better-ui--action-messages" data-better-ui--action-messages-auto-dismiss-value="10.0" class="rounded-lg p-4 relative bg-warning-50 border border-warning-200 text-warning-900">
  <div class="font-semibold mb-2 text-warning-900">
    Session Expiring
  </div>
  <div class="flex gap-3">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-warning-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke_linecap="round" stroke_linejoin="round" stroke_width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    </div>
    <ul class="list-none list-inside space-y-1 flex-1">
      <li class="text-sm">Your session will expire in 10 seconds.</li>
      <li class="text-sm">Please save your work to avoid losing data.</li>
    </ul>
  </div>
  <button type="button"
            data-action="click->better-ui--action-messages#dismiss"
    class="absolute top-3 right-3 p-1 rounded transition-colors text-warning-700 hover:bg-warning-100"
    aria-label="Dismiss">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
render BetterUi::ActionMessagesComponent.new(
  variant: :warning,
  style: :soft,
  title: "Session Expiring",
  dismissible: true,
  auto_dismiss: 10,
  messages: [
    "Your session will expire in 10 seconds.",
    "Please save your work to avoid losing data."
  ]
) do
  tag.svg(
    class: "w-6 h-6 text-warning-600 mt-1",
    fill: "none",
    stroke: "currentColor",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg"
  ) do
    tag.path(
      stroke_linecap: "round",
      stroke_linejoin: "round",
      stroke_width: "2",
      d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    )
  end
end

Demonstrates multiple features working together Shows icon, title, dismissible button, and auto-dismiss all at once

No params configured.