@amsterdam/design-system-react/dist/Tabs/TabsButton.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import clsx from 'clsx';
import { forwardRef, startTransition, useContext } from 'react';
import { TabsContext } from './TabsContext';
export const TabsButton = forwardRef(({ children, className, onClick, tab, ...restProps }, ref) => {
    const { activeTabId, tabsId, updateTab } = useContext(TabsContext);
    const handleClick = (event) => {
        onClick?.(event);
        startTransition(() => {
            updateTab(tab);
        });
    };
    return (_jsxs("button", { ...restProps, "aria-controls": `${tabsId}-panel-${tab}`, "aria-selected": activeTabId === tab, className: clsx('ams-tabs__button', className), id: `${tabsId}-tab-${tab}`, onClick: handleClick, ref: ref, role: "tab", tabIndex: activeTabId === tab ? 0 : -1, children: [_jsx("span", { "aria-hidden": "true", className: "ams-tabs__button-label-hidden", children: children }), _jsx("span", { className: "ams-tabs__button-label", children: children })] }));
});
TabsButton.displayName = 'Tabs.Button';