@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
72 lines (71 loc) • 2.86 kB
TypeScript
import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
import { IconProps } from '../Icon/Icon';
import { LinkButtonAriaAttribute, LinkButtonIconPosition, LinkButtonReferrerPolicy, LinkButtonRel, LinkButtonSize, LinkButtonVariant } from './LinkButton.utils';
export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
/** ARIA attributes to enhance accessibility.
* `{'aria-label'? string;`
* `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
* `'aria-labelledby'?: string;}`
*/
aria?: SelectedAriaAttributes<LinkButtonAriaAttribute>;
/** Custom data attributes. */
[key: `data-${string}`]: string | undefined;
/** Specifies that the target will be downloaded and opens native browser download dialog. */
download?: string;
/** Defines the URL to link to. */
href?: string;
/** Name of the icon to display. */
iconName?: IconName;
/** The position of the icon.
* @default 'left'
*/
iconPosition?: LinkButtonIconPosition;
/** URL or path for a custom icon. */
iconSource?: IconProps['source'];
/** Defines the referrer information send with the link. */
referrerPolicy?: LinkButtonReferrerPolicy;
/** Defines the rel attribute. */
rel?: LinkButtonRel;
/** The target of the link.
* @default '_self'
*/
target?: LinkTarget;
/** Defines the theme.
* @default 'light'
*/
theme?: Theme;
/** Tooltip content. */
tooltip?: string;
}
export interface LinkButtonProps extends CommonLinkProps {
/** Content within the link. */
children: React.ReactNode;
/** Hides the link label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/** Aligns `variant='ghost'` with text.
* @default false
*/
isFlush?: boolean;
/** Size of the link.
* @default 'medium'
*/
size?: LinkButtonSize;
/** Stretches the link over the parent's width.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
stretched?: BreakpointCustomizable<boolean>;
/** Visual style variant of the link.
* @default 'filled'
*/
variant?: LinkButtonVariant;
}
/**
* Use the Link component when you want the users to navigate to another internal or external page.
*
* Design in Figma: [Link Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=162-126)
* */
export declare const DSLinkButton: import('react').ForwardRefExoticComponent<LinkButtonProps & import('react').RefAttributes<HTMLAnchorElement>>;