Badge

Atom

Durum, kategori veya etiket göstergesi. 6 semantik varyant, 3 boyut, dot ve dismissible desteği.

Success

Preview

Active

Code

<%- include('modules/ui/Badge', { variant: 'success', children: 'Active' }) %>

Error

Preview

Inactive

Code

<%- include('modules/ui/Badge', { variant: 'error', children: 'Inactive' }) %>

Warning

Preview

Pending

Code

<%- include('modules/ui/Badge', { variant: 'warning', children: 'Pending' }) %>

Info

Preview

New

Code

<%- include('modules/ui/Badge', { variant: 'info', children: 'New' }) %>

Neutral

Preview

Design

Code

<%- include('modules/ui/Badge', { variant: 'neutral', children: 'Design' }) %>

Primary

Preview

Frontend

Code

<%- include('modules/ui/Badge', { variant: 'primary', children: 'Frontend' }) %>

Sizes

Preview

Small Medium Large

Code

<%- include('modules/ui/Badge', { variant: 'primary', size: 'sm', children: 'Small' }) %>
<%- include('modules/ui/Badge', { variant: 'primary', size: 'md', children: 'Medium' }) %>
<%- include('modules/ui/Badge', { variant: 'primary', size: 'lg', children: 'Large' }) %>

Dot badge

Preview

Online Away Busy Offline

Code

<%- include('modules/ui/Badge', { variant: 'success', dot: true, children: 'Online' }) %>
<%- include('modules/ui/Badge', { variant: 'warning', dot: true, children: 'Away' }) %>
<%- include('modules/ui/Badge', { variant: 'error', dot: true, children: 'Busy' }) %>
<%- include('modules/ui/Badge', { variant: 'neutral', dot: true, children: 'Offline' }) %>

Dismissible

Preview

React TypeScript Tailwind

Code

<%- include('modules/ui/Badge', { variant: 'primary', dismissible: true, children: 'React' }) %>
<%- include('modules/ui/Badge', { variant: 'primary', dismissible: true, children: 'TypeScript' }) %>

Source modules/ui/Badge.ejs

<%
var _v  = locals.variant || 'neutral';
var _sz = locals.size    || 'md';

var vc = {
  success: 'bg-success-subtle text-success-fg',
  error:   'bg-error-subtle text-error-fg',
  warning: 'bg-warning-subtle text-warning-fg',
  info:    'bg-info-subtle text-info-fg',
  neutral: 'bg-surface-sunken text-text-secondary',
  primary: 'bg-primary-subtle text-primary',
}[_v] || 'bg-surface-sunken text-text-secondary';

var sc = {
  sm: 'px-1.5 py-0 text-[10px]',
  md: 'px-2 py-0.5 text-xs',
  lg: 'px-3 py-1 text-sm',
}[_sz] || 'px-2 py-0.5 text-xs';

var dc = {
  success: 'bg-success', error: 'bg-error', warning: 'bg-warning',
  info: 'bg-info', neutral: 'bg-text-disabled', primary: 'bg-primary',
}[_v] || 'bg-text-disabled';
%>

  <% if (locals.dot) { %>
    
  <% } %>
  <%= locals.children %>
  <% if (locals.dismissible) { %>
    
  <% } %>