@primer/react-brand/lib/Token/Token.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css';
export declare const TokenVariants: readonly ["default", "accent", "outline", "invisible"];
export declare const defaultTokenVariant: "default";
type TokenLeadingVisual = React.ReactElement | React.ComponentType<{
    className?: string;
}>;
type TokenSharedProps = {
    /**
     * The leading visual appears before the Token content.
     * Pass an element to supply custom props, or a component type that accepts an optional className.
     */
    leadingVisual?: TokenLeadingVisual;
    /**
     * The variant variations available in Token.
     */
    variant?: (typeof TokenVariants)[number];
    /**
     * The HTML element rendered by Token.
     */
    as?: 'span' | 'a';
    ['data-testid']?: string;
};
type TokenSpanProps = BaseProps<HTMLSpanElement> & TokenSharedProps & {
    as?: 'span';
} & React.ComponentPropsWithoutRef<'span'>;
type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
    as: 'a';
    href: string;
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
export type TokenProps = TokenSpanProps | TokenAnchorProps;
/**
 * Use a Token to group short metadata or categories, with optional leading visuals.
 * @see https://primer.style/brand
 */
export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
    testIds: {
        root: string;
        readonly leadingVisual: string;
    };
};
export {};