StatusBadge

import { StatusBadge } from '@mihcm/ui/StatusBadge';
 
const CheckIcon = (
  <svg fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75" />
  </svg>
);
 
const WarnIcon = (
  <svg fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
  </svg>
);
 
<StatusBadge tone="success" icon={CheckIcon}>Module</StatusBadge>
<StatusBadge tone="warning" icon={WarnIcon}>No module</StatusBadge>

<tr>
  <td>Reports access</td>
  <td>
    <StatusBadge tone="success">Permission set</StatusBadge>
  </td>
</tr>

<StatusBadge tone="success">Active</StatusBadge>
<StatusBadge tone="warning">Pending</StatusBadge>
<StatusBadge tone="danger">Revoked</StatusBadge>
<StatusBadge tone="info">Beta</StatusBadge>
<StatusBadge tone="neutral">Draft</StatusBadge>