VisibilityBadge

Domain

Badge for PUBLIC / PRIVATE / UNLISTED visibility states with eye/lock icons. PUBLIC is green, PRIVATE is red, UNLISTED is neutral.

Preview

Public Private Unlisted

Code

<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'PUBLIC' }) %>
<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'PRIVATE' }) %>
<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'UNLISTED' }) %>

Preview

Public Public Public

Code

<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'PUBLIC', size: 'sm' }) %>
<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'PUBLIC', size: 'md' }) %>
<%- include('modules/domain/common/status/VisibilityBadge', { visibility: 'PUBLIC', size: 'lg' }) %>

<%
  var _visibility = (locals.visibility || '').toUpperCase();
  var _size       = locals.size       || 'md';
  var _showIcon   = locals.showIcon   !== false;

  var visibilityMeta = {
    PUBLIC:   { children: 'Public',   variant: 'success', icon: '' },
    PRIVATE:  { children: 'Private',  variant: 'error',   icon: '' },
    UNLISTED: { children: 'Unlisted', variant: 'neutral', icon: '' },
  };
  var meta = visibilityMeta[_visibility] || { children: locals.visibility || _visibility, variant: 'neutral', icon: '' };
  var label = (_showIcon && meta.icon ? meta.icon + ' ' : '') + meta.children;
%>
<%- include('../../../ui/Badge', {
  variant:  meta.variant,
  size:     _size,
  children: label,
  className: 'gap-1' + (locals.className ? ' ' + locals.className : '')
}) %>

VisibilityBadge

All states

Sizes