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.