Skip to main content

Badges & Overlays

Add badges and custom overlays to your floppy disks.

Badge Overlay​

Live Editor
function BadgeExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'New Release', author: 'v2.0' }}
      badge={
        <span style={{
          background: '#ff4444',
          color: 'white',
          padding: '4px 8px',
          borderRadius: '4px',
          fontSize: '12px',
          fontWeight: 'bold',
        }}>
          NEW
        </span>
      }
    />
  );
}
Result
Loading...

Custom Overlay​

Live Editor
function OverlayExample() {
  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Featured', author: 'Special' }}
    >
      <div style={{
        background: 'rgba(0,0,0,0.7)',
        color: 'white',
        padding: '8px',
        borderRadius: '4px',
        fontSize: '24px',
      }}>
        ⭐
      </div>
    </FloppyDisk>
  );
}
Result
Loading...