Another component likely needed within most applications is an alert, because at some point we’ll need to provide feedback to our users. So, let’s tackle an alert component.

💡 Small note - if you’re using Firefox, and you’re looking at the Pines UI alerts, you’ll notice the icon is overlapping the headline. This is just because they’re using the :has() pseudo selector to determine if there is an icon, and Firefox support for :has() is currently only in the nightly build. We’ll fix this in our component though.

Creating An Alert Demo Page

First, let’s create a new demonstration page for our alert component.

touch resources/views/pages/components/alert.edge