BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div data-controller="better-ui--action-messages" class="rounded-lg p-4 relative bg-success-50 border border-success-200 text-success-900">
  <div class="font-semibold mb-2 text-success-900">
    Payment Successful
  </div>
  <div class="flex gap-3">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-success-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="M9 12l2 2 4-4m6 2a9 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 payment has been processed.</li>
      <li class="text-sm">You will receive a confirmation email shortly.</li>
    </ul>
  </div>
</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
render BetterUi::ActionMessagesComponent.new(
  variant: :success,
  style: :soft,
  title: "Payment Successful",
  messages: [
    "Your payment has been processed.",
    "You will receive a confirmation email shortly."
  ]
) do
  tag.svg(
    class: "w-6 h-6 text-success-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: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
    )
  end
end

Demonstrates icon slot with custom SVG icon Icons are passed as block content to the component

No params configured.