ButtonGroup

Atom

Birbirini dışlayan seçenekler için segmentli buton grubu. 4 variant, 4 boyut ve disabled item desteği.

Outline (default)

Preview

Code

<%- include('modules/ui/ButtonGroup', {
  value: 'week',
  items: [
    { value: 'day',   label: 'Day' },
    { value: 'week',  label: 'Week' },
    { value: 'month', label: 'Month' },
  ],
}) %>

Primary

Preview

Code

<%- include('modules/ui/ButtonGroup', { variant: 'primary', value: 'week', items: [...] }) %>

Secondary

Preview

Code

<%- include('modules/ui/ButtonGroup', { variant: 'secondary', value: 'week', items: [...] }) %>

Ghost

Preview

Code

<%- include('modules/ui/ButtonGroup', { variant: 'ghost', value: 'week', items: [...] }) %>

Sizes

Preview

Code

<%- include('modules/ui/ButtonGroup', { size: 'xs', value: 'a', items: [...] }) %>
<%- include('modules/ui/ButtonGroup', { size: 'sm', value: 'a', items: [...] }) %>
<%- include('modules/ui/ButtonGroup', { size: 'md', value: 'a', items: [...] }) %>
<%- include('modules/ui/ButtonGroup', { size: 'lg', value: 'a', items: [...] }) %>

With disabled item

Preview

Code

<%- include('modules/ui/ButtonGroup', {
  value: 'week',
  items: [
    { value: 'day',   label: 'Day' },
    { value: 'week',  label: 'Week' },
    { value: 'month', label: 'Month', disabled: true },
  ],
}) %>

Icon-style labels

Preview

Code

<%- include('modules/ui/ButtonGroup', {
  value: 'grid',
  items: [
    { value: 'list', label: '' },
    { value: 'grid', label: '' },
    { value: 'map',  label: '' },
  ],
}) %>

Source modules/ui/ButtonGroup.ejs

<%
var _v     = locals.variant || 'outline';
var _sz    = locals.size    || 'md';
var _items = locals.items   || [];
var _value = locals.value   || (_items[0] && _items[0].value) || '';

var sc = {
  xs: 'px-2 py-1 text-xs',
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
}[_sz] || 'px-4 py-2 text-sm';

var vc = {
  outline: {
    wrap:     'inline-flex rounded-md overflow-hidden border border-border divide-x divide-border',
    active:   'bg-surface-overlay font-semibold text-text-primary',
    inactive: 'bg-surface-base hover:bg-surface-overlay text-text-primary',
  },
  primary: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-primary text-primary-fg',
    inactive: 'bg-primary/20 hover:bg-primary/40 text-primary-fg',
  },
  secondary: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-secondary text-secondary-fg',
    inactive: 'bg-secondary/20 hover:bg-secondary/40 text-secondary-fg',
  },
  ghost: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-surface-overlay font-semibold text-text-primary',
    inactive: 'hover:bg-surface-overlay text-text-primary',
  },
}[_v] || {
  wrap: 'inline-flex rounded-md overflow-hidden border border-border divide-x divide-border',
  active: 'bg-surface-overlay font-semibold text-text-primary',
  inactive: 'bg-surface-base hover:bg-surface-overlay text-text-primary',
};
%>

  <% _items.forEach(function(item, i) {
    var isActive = item.value === _value;
    var isFirst  = i === 0;
    var isLast   = i === _items.length - 1;
    var roundL = (_v !== 'outline' && isFirst) ? ' rounded-l-md' : '';
    var roundR = (_v !== 'outline' && isLast)  ? ' rounded-r-md' : '';
  %>
    
  <% }); %>