TabIndicator

@coinbase/cds-web@8.64.0

A visual indicator that shows the active tab position.

󰣸

This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTabsActiveIndicator instead.

import { TabIndicator } from '@coinbase/cds-web/tabs/TabIndicator'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• TabNavigation

Basic Example

Loading...

󰙡

Live Code

function TabIndicatorExample() {
  const getRandomNumber = () => Math.random() * 100 + 100;
  const [width, setWidth] = useState(120);
  const [x, setX] = useState(120);

  const handlePress = () => {
    setWidth(getRandomNumber());
    setX(getRandomNumber());
  };

  return (
    <VStack padding={4} gap={2} background="bg">
      <Button onClick={handlePress} block>
        Randomize
      </Button>
      <TabIndicator width={width} x={x} />
    </VStack>
  );
}