Alert

Svelte

<script>
  let alert = 'I am an alert !!!'
</script>

{#if alert}
<Alert accent="" filled iconName closable on:close="{() => (alert = '')}">
  <p>{alert}</p>
</Alert>
{/if}

<!-- Or with body prop -->
<Alert body="{alert}" />

<!-- Other icon -->
<Alert accent="gamma" closable="{false}">
  <Icon name="brightness_low" slot="icon" />
  <p>I am an alert with icon</p>
</Alert>

HTML

<div class="alert accent filled" role="alert">
  <div class="alert-icon">
    <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
      <use href="#check"></use>
    </svg>
  </div>

  <div class="alert-body">
    <p>I am alert</p>
  </div>

  <div class="alert-close">
    <button class="btn alpha small icon-only {filled}" type="button">
      <svg
        height="24px"
        width="24px"
        viewBox="0 0 24 24"
        fill="{filled} ? white : var(--bg)"
      >
        <use href="#close"></use>
      </svg>
    </button>
  </div>
</div>

Customize CSS

.alert {
  --alert-border-radius: 0.33rem;

  /* to shrink alert: */
  width: fit-content;
}