x
1
2
3
4
5
6
7
8
9
10
11
<div data-controller="better-ui--action-messages" class="rounded-lg p-4 relative bg-info-50 border border-info-200 text-info-900"> <div class="font-semibold mb-2 text-info-900"> Notification </div> <div class="flex gap-3"> <ul class="list-none list-inside space-y-1 flex-1"> <li class="text-sm">This is the first message.</li> <li class="text-sm">This is the second message.</li> </ul> </div></div>1
2
3
4
5
6
7
8
9
10
messages = [ message_1, message_2, message_3 ].reject(&:blank?)render BetterUi::ActionMessagesComponent.new( variant: variant.to_sym, style: style.to_sym, dismissible: dismissible, auto_dismiss: auto_dismiss&.to_f&.positive? ? auto_dismiss.to_f : nil, title: title.present? ? title : nil, messages: messages)Interactive playground with configurable parameters Experiment with different variants, styles, and features in real-time
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|