# disco/1.4.21/backend/views/components/Main/pages/Rules/Tabs/TabButton.jsx

Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO, version 1.4.21. 24 lines.

- Page: https://pluginprobe.com/plugins/disco/1.4.21/code/backend/views/components/Main/pages/Rules/Tabs/TabButton.jsx
- Raw: https://pluginprobe.com/plugins/disco/1.4.21/raw/backend/views/components/Main/pages/Rules/Tabs/TabButton.jsx
- Modified: 2026-09-11T05:31:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/disco/1.4.21/code/backend/views/components/Main/pages/Rules/Tabs/TabButton.jsx#L10-L20`.

```jsx
import { Tab } from '@headlessui/react';
import { Fragment } from 'react';

const TabButton = ({ children, disabled }) => {
	return (
		<Tab as={Fragment}>
			{({ selected }) => (
				<button
					className={`disco:first:rounded-l-xl disco:last:rounded-r-xl disco:box-border disco:border disco:border-gray-100 disco:pt-3.5 disco:pb-3 disco:grow disco:justify-between disco:outline-hidden disco:text-base  ${
						selected
							? 'disco:bg-primary disco:border! disco:border-solid! disco:text-white'
							: 'disco:bg-white'
					} ${
						!disabled ? 'disco:text-primary' : 'disco:text-gray-400'
					}`}
				>
					{children}
				</button>
			)}
		</Tab>
	);
};
export default TabButton;

```