x
1
2
3
4
5
6
7
8
9
10
11
12
<div data-controller="better-ui--action-messages" class="rounded-lg p-4 relative bg-danger-50 border border-danger-200 text-danger-900"> <div class="font-semibold mb-2 text-danger-900"> Please correct the following errors: </div> <div class="flex gap-3"> <ul class="list-none list-inside space-y-1 flex-1"> <li class="text-sm">Email can't be blank</li> <li class="text-sm">Password is too short (minimum is 8 characters)</li> <li class="text-sm">Password confirmation doesn't match Password</li> </ul> </div></div>1
2
3
4
5
6
7
8
9
10
render BetterUi::ActionMessagesComponent.new( variant: :danger, style: :soft, title: "Please correct the following errors:", messages: [ "Email can't be blank", "Password is too short (minimum is 8 characters)", "Password confirmation doesn't match Password" ])Real-world example: Form validation errors Common use case showing danger variant with multiple error messages
No params configured.