FloatingBadge

---
import {
  Avatar,
  Button,
  FloatingBadge,
  Icon
} from '@santi020k/lumen-astro'
---

<div style="display: flex; gap: 2rem; align-items: center;">
  <span style="display: inline-flex; position: relative;">
    <Button variant="outline" size="icon" aria-label="Inbox">
      <Icon name="inbox" decorative />
    </Button>
    <FloatingBadge
      aria-label="12 unread messages"
      style="position: absolute; right: -0.65rem; top: -0.65rem;"
    >
      12
    </FloatingBadge>
  </span>

  <span style="display: inline-flex; position: relative;">
    <Avatar aria-label="Ana Torres">AT</Avatar>
    <FloatingBadge
      aria-label="3 notifications"
      style="position: absolute; right: -0.65rem; top: -0.65rem;"
    >
      3
    </FloatingBadge>
  </span>
</div>

import { Avatar, Button, FloatingBadge, Icon } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
      <span style={{ display: 'inline-flex', position: 'relative' }}>
        <Button variant="outline" size="icon" aria-label="Inbox">
          <Icon name="inbox" decorative />
        </Button>
        <FloatingBadge
          aria-label="12 unread messages"
          style={{ position: 'absolute', right: '-0.65rem', top: '-0.65rem' }}
        >
          12
        </FloatingBadge>
      </span>

      <span style={{ display: 'inline-flex', position: 'relative' }}>
        <Avatar aria-label="Ana Torres">AT</Avatar>
        <FloatingBadge
          aria-label="3 notifications"
          style={{ position: 'absolute', right: '-0.65rem', top: '-0.65rem' }}
        >
          3
        </FloatingBadge>
      </span>
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: flex; gap: 2rem; align-items: center;">
  <span style="display: inline-flex; position: relative;">
    <lumen-button variant="outline" size="icon" aria-label="Inbox">
      <lumen-icon name="inbox" decorative></lumen-icon>
    </lumen-button>
    <lumen-floating-badge
      aria-label="12 unread messages"
      style="position: absolute; right: -0.65rem; top: -0.65rem;"
    >
      12
    </lumen-floating-badge>
  </span>

  <span style="display: inline-flex; position: relative;">
    <lumen-avatar aria-label="Ana Torres">AT</lumen-avatar>
    <lumen-floating-badge
      aria-label="3 notifications"
      style="position: absolute; right: -0.65rem; top: -0.65rem;"
    >
      3
    </lumen-floating-badge>
  </span>
</div>