I want to embed a Shoelace badge component in my Softr header to represent the number of new “notifications” (items in a notification Airtable table).
I did a test with static data and added the snippet of code (seen below) to a new header link field and it actually displays well. Now I need to find a way to use dynamic Airtable data to populate the value. It would be helpful if I could add the code to an Airtable formula field to pull dynamic count of records from a linked record. We do this a lot with progress bars and rings and we usually call it with a list block and an embed field.
Not sure if anyone else has tackled this one yet or not.
<div class="badge-pulse">
<sl-badge variant="danger" pill pulse>6</sl-badge>
</div>
<style>
.badge-pulse sl-badge:not(:last-of-type) {
margin-right: 1rem;
}
</style>
View of the test:
