@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
80 lines (79 loc) • 2.29 kB
TypeScript
import type { MouseEvent, ReactNode } from 'react';
import React from 'react';
type Size = 'small' | 'medium' | 'large';
type ButtonType = 'submit' | 'button' | 'reset';
interface Props {
/**
* Unique ID for the component
*/
id?: string;
/**
* Name of the button element
*/
name?: string;
/**
* Allows to change the HTML type of button element. Ignored when `href` is defined
*
* @param {ButtonType} submit Button submits the form data
* @param {ButtonType} button No functionality when pressed
* @param {ButtonType} reset Button resets all the controls to their initial values
*
* @default 'submit'
*/
type?: ButtonType;
/**
* Allows to change layout of the component based on size
*
* @param {Size} small Renders component in compact layout
* @param {Size} medium Default
* @param {Size} large Renders component with enlarged title and subtitle
*
* @default 'medium'
*/
size?: Size;
/**
* Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
*/
href?: string;
/**
* Allows to define title
*/
title: string;
/**
* Allows to define subtitle
*/
subtitle?: string;
/**
* Allows to define visual content
*/
children: ReactNode;
/**
* On button click callback
*/
onClick?: (e: MouseEvent<HTMLElement>) => void;
/**
* Allows to change icon from `ChevronRight` to `Open`
*/
isExternal?: boolean;
/**
* Allows to pass an aria-label for the icon
* For example, with an external icon, an aria label could be "opens in a new window" or "leads to another website".
*/
ariaLabelIcon?: string;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* Allows to pass any data-* attribute
*/
dataAttributes?: Record<`data-${string}`, string>;
}
/** @visibleName Button Card */
declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
/** @component */
export default ButtonCard;