Function Tab

components/tabs/tab.tsx:38–68

({ value, label, startAdornment, badge, onClick, isActive, disabled }: TabProps)

}

export function Tab({ value, label, startAdornment, badge, onClick, isActive, disabled }: TabProps) {
  return (
    <li role='presentation'>
      <Button
        variant='text-default'
        className={clsxMerge(tabVariants({ isActive, disabled }))}
        id={`tab-${value}`}
        role='tab'
        aria-controls={kebabCase(`tab-panel-${value}`)}
        aria-selected={isActive}
        onClick={() => {
          onClick(value);
        }}
        disabled={disabled}
        startAdornment={startAdornment}
        endAdornment={
          badge ? (
            <Badge
              variant={isActive ? 'primary' : 'secondary'}
              className={disabled ? 'border-transparent bg-slate-100 text-slate-400' : ''}
              {...badge}
            />
          ) : undefined
        }
        tabIndex={0}
      >
        {label}
      </Button>
    </li>
  );
}

Tab.displayName = 'Tab';