@engie-group/fluid-design-system-react
Version:
Fluid Design System React
67 lines (66 loc) • 1.97 kB
TypeScript
import React, { ReactElement, ReactNode } from 'react';
import { TSizeVariants } from '../../global';
export declare const NJIconButton: React.ForwardRefExoticComponent<IIconButtonBaseProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
export interface IIconButtonBaseProps {
/**
* Icon button size
*/
size?: Extract<TSizeVariants, '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
/**
* Type of the icon button
*/
type?: 'button' | 'submit' | 'reset';
/**
* For toggle buttons, indicate the state
*/
ariaPressed?: boolean;
/**
* Additional description for assistive technologies based on visible text
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
*/
ariaDescribedby?: string;
/**
* Icon button theme variant
*/
variant?: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive' | 'inverse';
/**
* Icon button title
*/
title?: string;
/**
* Text alternative for assistive technologies
*/
label: string;
/**
* Whether icon button is disabled or not
*/
isDisabled?: boolean;
/**
* Button `href`. If set, icon button turn into a link
*/
href?: string;
/**
* Icon button link target (only if `href` is set)
*/
hrefTarget?: string;
/**
* Icon button link rel (only if `href` is set)
*/
hrefRel?: string;
/**
* Icon button material icon name (from https://material.io/resources/icons/?style=baseline)
*/
icon?: string;
/**
* Function called on icon button click
*/
onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
/**
* Optional additional className
*/
className?: string;
/**
* Optional children if you want to pass custom icon (see example)
*/
children?: ReactNode | ReactElement | ReactElement[];
}