x
1
2
3
4
5
6
7
8
9
10
<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"> Success! </div> <div class="flex gap-3"> <ul class="list-none list-inside space-y-1 flex-1"> <li class="text-sm">Your changes have been saved successfully.</li> </ul> </div></div>1
2
3
4
5
6
render BetterUi::ActionMessagesComponent.new( variant: :success, style: :soft, title: "Success!", messages: [ "Your changes have been saved successfully." ])Real-world example: Success notification Common use case showing success variant with confirmation message
No params configured.