Lookbook Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bg-yellow-50 border-yellow-400 text-yellow-700 border-l-4 p-4">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-yellow-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 ">
        This is a warning
      </p>
    </div>
  </div>
</div>
1
render Feedback::AlertComponent.new(message: "This is a warning", style: :warn)

Warning alert

Used to notify users about some potentially hard-to-undo consequences to an action.

Don't use this for form validation errors! Use the form-specific messaging component instead.

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.