Badge

<article aria-labelledby="badge" role="status"> <h4 id="badge"> Badge </h4>
</article>

<Badge title="Badge" />

<article aria-labelledby="badgeinfo" role="status" aria-roledescription="info">
  <h4 id="badgeinfo"> BadgeInfo </h4> </article>

<BadgeInfo title="BadgeInfo" hasIcon={false} />

<article aria-labelledby="badgewarning" role="status"
  aria-roledescription="warning"> <h4 id="badgewarning"> BadgeWarning </h4>
</article>

<BadgeWarning title="BadgeWarning" hasIcon={false} />

<article aria-labelledby="badgedanger" role="status"
  aria-roledescription="error"> <h4 id="badgedanger"> BadgeDanger </h4>
</article>

<BadgeDanger title="BadgeDanger" hasIcon={false} />

<article aria-labelledby="badgesuccess" role="status"
  aria-roledescription="success"> <h4 id="badgesuccess"> BadgeSuccess </h4>
</article>

<BadgeSuccess title="BadgeSuccess" hasIcon={false} />

<article aria-labelledby="badge" role="status"> <h4 id="badge"> Badge </h4>
</article>

<Badge title="Badge" />

<article aria-labelledby="badgeinfo" role="status" aria-roledescription="info">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img"
    slot="before-icon"> <path
      d="M10.6 7.6c-1.6.8-3 2.1-4.4 4-.2.3-.2.4 0 .6.1.1.2.1.4-.2l.1-.1c.2-.2.3-.4.6-.7 1-1.2 1.5-1.7 2.3-2.1.7-.4 1.3.2 1.1.9 0 .2-.1.4-.2.7-.1.1-.1.2-.1.3-.3.7-.5 1.2-.9 2.4v.1c-.1.3-.1.3-.3.7-.6 1.5-.9 2.4-1.3 3.4v.1c-.1.3-.1.4-.2.5-.4 1.1-.7 1.9-.8 2.6 0 .1 0 .1-.1.2-.1.4-.2.7-.2 1-.1.5 0 .9.1 1.3.2.4.6.7 1 .7.7.1 1.4.1 2.1 0l1-.3c1-.4 1.9-.9 2.8-1.7.8-.7 1.5-1.5 2.3-2.4.1-.1.1-.1.1-.2.2-.3.4-.5.4-.7 0-.2-.1-.4-.3-.4-.1 0-.2.1-.3.3-.1.1-.1.2-.2.2l-.6.6c-.3.4-.7.7-1.2 1.3-.3.3-.6.5-.9.7-.6.3-1.1-.1-1-.7 0-.4.1-.8.3-1.3.3-.9.6-1.6 1.2-3.2.3-.7.4-1 .5-1.4.4-1.1.7-2 1.1-2.9.4-1.1.6-1.9.7-2.7.1-.6-.1-1.2-.5-1.6-.4-.5-1.1-.7-1.8-.7-.8 0-1.8.2-2.8.7zM16.5.2c-1.5-.6-3.4.4-3.7 2.1-.2 1.2.2 2.2 1.1 2.6 1.8.8 3.9-.5 3.9-2.5.1-1.1-.4-1.9-1.3-2.2z"></path>
  </svg> <h4 id="badgeinfo"> BadgeInfo </h4> </article>

<BadgeInfo title="BadgeInfo" hasIcon={false} />

<article aria-labelledby="badgewarning" role="status"
  aria-roledescription="warning"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img" slot="before-icon"> <path
      d="M10.6 7.6c-1.6.8-3 2.1-4.4 4-.2.3-.2.4 0 .6.1.1.2.1.4-.2l.1-.1c.2-.2.3-.4.6-.7 1-1.2 1.5-1.7 2.3-2.1.7-.4 1.3.2 1.1.9 0 .2-.1.4-.2.7-.1.1-.1.2-.1.3-.3.7-.5 1.2-.9 2.4v.1c-.1.3-.1.3-.3.7-.6 1.5-.9 2.4-1.3 3.4v.1c-.1.3-.1.4-.2.5-.4 1.1-.7 1.9-.8 2.6 0 .1 0 .1-.1.2-.1.4-.2.7-.2 1-.1.5 0 .9.1 1.3.2.4.6.7 1 .7.7.1 1.4.1 2.1 0l1-.3c1-.4 1.9-.9 2.8-1.7.8-.7 1.5-1.5 2.3-2.4.1-.1.1-.1.1-.2.2-.3.4-.5.4-.7 0-.2-.1-.4-.3-.4-.1 0-.2.1-.3.3-.1.1-.1.2-.2.2l-.6.6c-.3.4-.7.7-1.2 1.3-.3.3-.6.5-.9.7-.6.3-1.1-.1-1-.7 0-.4.1-.8.3-1.3.3-.9.6-1.6 1.2-3.2.3-.7.4-1 .5-1.4.4-1.1.7-2 1.1-2.9.4-1.1.6-1.9.7-2.7.1-.6-.1-1.2-.5-1.6-.4-.5-1.1-.7-1.8-.7-.8 0-1.8.2-2.8.7zM16.5.2c-1.5-.6-3.4.4-3.7 2.1-.2 1.2.2 2.2 1.1 2.6 1.8.8 3.9-.5 3.9-2.5.1-1.1-.4-1.9-1.3-2.2z"></path>
  </svg> <h4 id="badgewarning"> BadgeWarning </h4> </article>

<BadgeWarning title="BadgeWarning" hasIcon={false} />

<article aria-labelledby="badgedanger" role="status"
  aria-roledescription="error"> <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img" slot="before-icon"> <path
      d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
  </svg> <h4 id="badgedanger"> BadgeDanger </h4> </article>

<BadgeDanger title="BadgeDanger" hasIcon={false} />

<article aria-labelledby="badgesuccess" role="status"
  aria-roledescription="success"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img" slot="before-icon"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> <h4 id="badgesuccess"> BadgeSuccess </h4> </article>

<BadgeSuccess title="BadgeSuccess" hasIcon={false} />