@base-ui-components/react/tabs/tab/TabsTab.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
import type { TabsRoot } from "../root/TabsRoot.js";
/**
 * An individual interactive tab button that toggles the corresponding panel.
 * Renders a `<button>` element.
 *
 * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
 */
export declare const TabsTab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<Element>>;
export type TabsTabValue = any | null;
export type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
export interface TabsTabPosition {
  left: number;
  right: number;
  top: number;
  bottom: number;
}
export interface TabsTabSize {
  width: number;
  height: number;
}
export interface TabsTabMetadata {
  disabled: boolean;
  id: string | undefined;
  value: any | undefined;
}
export interface TabsTabState {
  /**
   * Whether the component should ignore user interaction.
   */
  disabled: boolean;
  active: boolean;
  orientation: TabsRoot.Orientation;
}
export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTab.State> {
  /**
   * The value of the Tab.
   * When not specified, the value is the child position index.
   */
  value?: TabsTab.Value;
}
export declare namespace TabsTab {
  type Value = TabsTabValue;
  type ActivationDirection = TabsTabActivationDirection;
  type Position = TabsTabPosition;
  type Size = TabsTabSize;
  type Metadata = TabsTabMetadata;
  type State = TabsTabState;
  type Props = TabsTabProps;
}