@stratakit/bricks/dist/Anchor.d.ts

Small, modular components for StrataKit

import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface AnchorRootProps extends FocusableProps<"a"> {
    /** @default "neutral" */
    tone?: "neutral" | "accent";
}
/**
 * A styled anchor element, typically used for navigating to a different location.
 *
 * Supports the convenience API (lesser code) and the composition API (more customization).
 *
 * Example of convenience API:
 * ```tsx
 * import { Anchor } from "@stratakit/bricks";
 *
 * <Anchor href="https://www.example.com">Example</Anchor>
 * ```
 *
 * Example of composition API:
 * ```tsx
 * import * as Anchor from "@stratakit/bricks/Anchor";
 *
 * <Anchor.Root href="https://www.example.com">Example</Anchor.Root>
 * ```
 */
declare const AnchorRoot: import("react").ForwardRefExoticComponent<AnchorRootProps & import("react").RefAttributes<HTMLElement | HTMLAnchorElement>>;
interface AnchorTextProps extends BaseProps<"span"> {
    /**
     * The content displayed inside the anchor.
     */
    children: React.ReactNode;
}
/**
 * Displays the anchor text.
 */
declare const AnchorText: import("react").ForwardRefExoticComponent<AnchorTextProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
interface AnchorExternalMarkerProps extends Omit<BaseProps<"span">, "children"> {
    /**
     * Visually hidden text for screen readers.
     * @default "external"
     */
    alt?: string;
}
/**
 * Displays an external link marker, with visually hidden text for screen readers.
 */
declare const AnchorExternalMarker: import("react").ForwardRefExoticComponent<AnchorExternalMarkerProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
interface AnchorProps extends FocusableProps<"a">, Pick<AnchorRootProps, "tone"> {
}
/**
 * A styled anchor element, typically used for navigating to a different location.
 */
declare const Anchor: import("react").ForwardRefExoticComponent<AnchorProps & import("react").RefAttributes<HTMLElement | HTMLAnchorElement>>;
export default Anchor;
export { AnchorRoot as Root, AnchorText as Text, AnchorExternalMarker as ExternalMarker, };