@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
48 lines (47 loc) • 2.04 kB
TypeScript
import type { PropsFor } from "../../types.js";
export type TabsVariant = TabsProps["variant"];
export type TabsProps = PropsFor<"div", {
/** Can be used to change the menu's appearance. Available variants: 'default' (default) and 'styled'. */
variant?: "default" | "styled";
/** Removes padding from tabs container */
noPadding?: boolean;
/** Disable background color for tabs container */
noBackground?: boolean;
/** Background color for selected tab (styled variant) and content area.
* Choose between "base" (default), "base-2", "base-3", or "transparent"
* (latter not supported by "styled" variant) */
contentBackground?: "base" | "base-2" | "base-3" | "transparent";
/** Props passed to the content area div element */
contentProps?: Omit<PropsFor<"div">, "children">;
/** Add a border radius to top of tab bar and bottom of Tabs.Item content area (if any)
* @example
* `false` or `undefined` (default) = no border radius
* `"xs"` = `4px`
* `"s"` = `8px`
* `true` or `"m"` = `12px`
* `"l"` = `16px`
* `"xl"` = `24px` */
radius?: boolean | "xs" | "s" | "m" | "l" | "xl";
/** Add a border radius to top of tab bar
* @example
* `false` or `undefined` (default) = no border radius
* `"xs"` = `4px`
* `"s"` = `8px`
* `true` or `"m"` = `12px`
* `"l"` = `16px`
* `"xl"` = `24px` */
radiusTop?: boolean | "xs" | "s" | "m" | "l" | "xl";
/** Add a border radius to bottom of Tabs.Item content area (if any)
* @example
* `false` or `undefined` (default) = no border radius
* `"xs"` = `4px`
* `"s"` = `8px`
* `true` or `"m"` = `12px`
* `"l"` = `16px`
* `"xl"` = `24px` */
radiusBottom?: boolean | "xs" | "s" | "m" | "l" | "xl";
/** Add padding inline (left and right) to tab bar */
paddingInline?: number;
}>;
declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
export default Tabs;