TabButton

import { TabButton } from 'twenty-ui/components/navigation';
import { IconSettings } from 'twenty-ui/icon';

export const GeneralAction = ({ onOpen }: { onOpen: () => void }) => (
  <TabButton startIcon={<IconSettings />} onClick={onOpen}>
    General
  </TabButton>
);

import { TabButton } from 'twenty-ui/components/navigation';
import { IconCreditCard } from 'twenty-ui/icon';

export const BillingLink = () => (
  <TabButton
    href="/billing"
    active
    aria-current="page"
    startIcon={<IconCreditCard />}
  >
    Billing
  </TabButton>
);

import { TabButton } from 'twenty-ui/components/navigation';

export const ComposedBillingLink = () => (
  <TabButton
    nativeButton={false}
    role="link"
    href="/billing"
    render={<a />}
    aria-current="page"
    active
  >
    Billing
  </TabButton>
);

import { useState } from 'react';
import { TabButton } from 'twenty-ui/components/navigation';
import { IconPlus } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const AddTabAction = () => {
  const [count, setCount] = useState(1);

  return (
    <>
      <TabButton startIcon={<IconPlus />} onClick={() => setCount(count + 1)}>
        New Tab
      </TabButton>
      <Text role="status">Tabs: {count}</Text>
    </>
  );
};