ButtonGroup
AtomSegmented button group for mutually-exclusive options. Supports 4 variants, 4 sizes and disabled items.
<%- include('modules/ui/ButtonGroup', {
value: 'week',
items: [
{ value: 'day', label: 'Day' },
{ value: 'week', label: 'Week' },
{ value: 'month', label: 'Month' },
],
}) %><%- include('modules/ui/ButtonGroup', { variant: 'primary', value: 'week', items: [...] }) %><%- include('modules/ui/ButtonGroup', { variant: 'secondary', value: 'week', items: [...] }) %><%- include('modules/ui/ButtonGroup', { variant: 'ghost', value: 'week', items: [...] }) %><%- 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: [...] }) %><%- include('modules/ui/ButtonGroup', {
value: 'week',
items: [
{ value: 'day', label: 'Day' },
{ value: 'week', label: 'Week' },
{ value: 'month', label: 'Month', disabled: true },
],
}) %><%- include('modules/ui/ButtonGroup', {
value: 'grid',
items: [
{ value: 'list', label: '' },
{ value: 'grid', label: '' },
{ value: 'map', label: '' },
],
}) %><%
var _v = locals.variant || 'outline';
var _sz = locals.size || 'md';
var _items = locals.items || [];
var _value = locals.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',
base: 'border-y border-border text-text-primary',
active: 'bg-surface-overlay font-semibold',
inactive: 'bg-surface-base hover:bg-surface-overlay',
},
primary: {
wrap: 'inline-flex rounded-md overflow-hidden',
base: 'text-primary-fg',
active: 'bg-primary',
inactive: 'bg-primary/20 hover:bg-primary/40',
},
secondary: {
wrap: 'inline-flex rounded-md overflow-hidden',
base: 'text-secondary-fg',
active: 'bg-secondary',
inactive: 'bg-secondary/20 hover:bg-secondary/40',
},
ghost: {
wrap: 'inline-flex rounded-md overflow-hidden',
base: 'text-text-primary',
active: 'bg-surface-overlay font-semibold',
inactive: 'hover:bg-surface-overlay',
},
}[_v] || {
wrap: 'inline-flex rounded-md overflow-hidden border border-border divide-x divide-border',
base: 'border-y border-border text-text-primary',
active: 'bg-surface-overlay font-semibold',
inactive: 'bg-surface-base hover:bg-surface-overlay',
};
%>
<% _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' : '';
%>
<% }); %>