UsageCard

UsageCard mostra used / limit com uma Progress bar e troca o intent automaticamente quando o uso passa dos thresholds (0.8 warning, 0.95 danger por padrão).

'use client';
import { UsageCard } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';

export default function UsageCardDefault() {
  return (
    <UsageCard
      label="API calls"
      used={72_000}
      limit={100_000}
      unit="req/mês"
      cta={
        <Button size="sm" variant="outline">
          Ver detalhes
        </Button>
      }
    />
  );
}

Uso

import { UsageCard } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';

<UsageCard
  label="Armazenamento"
  used={8.5}
  limit={10}
  unit="GB"
  cta={<Button size="sm">Aumentar limite</Button>}
/>

Props

• label / description — copy.
• used, limit, unit — números brutos. unit é exibido depois do valor.
• cta — slot livre, geralmente exibido apenas quando o uso está próximo do limite.
• warningThreshold / dangerThreshold — frações entre 0 e 1 para customizar a troca de intent.

Acessibilidade

A Progress bar tem aria-label informando o percentual atual. Para muitos cards lado-a-lado, considere usar o StatGrid.