Lookbook Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bg-red-50 border-red-400 text-red-700 border-l-4 p-4">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm ">
        That was bad
      </p>
    </div>
  </div>
</div>
1
render Feedback::AlertComponent.new(message: "That was bad", style: :danger)

Danger alert

Used to notify users that something bad has happened.

No params configured.

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

No assets to display.
Check out the button component preview to see an example with asset files.