TabButton

Organism

Pill-style tab button with active/inactive coloring and an optional count badge.

Preview

Code

<%- include('modules/ui/TabButton', { active: true,  children: 'All',      count: 42 }) %>
<%- include('modules/ui/TabButton', { active: false, children: 'Active',   count: 18 }) %>
<%- include('modules/ui/TabButton', { active: false, children: 'Archived', count: 24 }) %>

Preview

Code

<%- include('modules/ui/TabButton', { active: true,  children: 'Selected' }) %>
<%- include('modules/ui/TabButton', { active: false, children: 'Default' }) %>

<%
  var _active    = !!locals.active;
  var _children  = locals.children  || '';
  var _count     = (locals.count !== undefined && locals.count !== null) ? locals.count : null;
  var _onClick   = locals.onClick   || '';
  var _className = locals.className || '';

  var stateCls = _active
    ? 'bg-primary text-primary-fg shadow-sm'
    : 'text-text-secondary hover:text-text-primary hover:bg-surface-overlay';

  var countCls = _active
    ? 'bg-primary-fg/20 text-primary-fg'
    : 'bg-surface-sunken text-text-disabled';
%>

TabButton

With counts

Without count