Brand Alert
<brand-alert> wraps Shoelace's <sl-alert>. Use the variant attribute for semantic colouring.
Variants
Fill (solid)
Soft (pale tint)
Closable
Usage
import { BrandAlert } from '@brandos/ui';
<brand-alert variant="success" open>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
Saved.
</brand-alert>
// JS — toast notification
const alert = document.createElement('brand-alert');
alert.setAttribute('variant', 'success');
alert.textContent = 'Saved!';
alert.toast();