zidanecomponents/IconButton
import { … } from 'zidane-ui'ui/src/components/IconButton.tsx
Components#
IconButtonComponent#
Renders a square icon button with an accessible label. Hover and active states lift it
to the raised chip. Use render to draw another element, such as a link, with the same
look. The ref goes to the button.
const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>Props
| Name | Type | Default | Description |
|---|---|---|---|
active?from IconButtonLook | boolean | Toggled on / open: shows as the raised chip. | |
| children? | ReactNode | Badges and overlays (an unseen dot, a spinner) over the glyph. | |
| icon | ReactNode | An icon class ( | |
| label | string | Accessible name and default tooltip. Required, since the button has no text. | |
overlay?from IconButtonLook | boolean | Room for badges / overlays positioned over the glyph. | |
| render? | (props: IconButtonRenderProps) => ReactElement | Render another element with the button's look (a link). | |
size?from IconButtonLook | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Button size. |
tone?from IconButtonLook | 'danger' | 'neutral' | 'neutral' | Colour of the glyph. |
Functions#
iconButtonClassFunction#
The IconButton look as a class string, for elements that can't be the component.
function iconButtonClass(look?: IconButtonLook): stringParameters
| Name | Type | Default | Description |
|---|---|---|---|
| look? | IconButtonLook | {} | The size, tone and overlay options of the look. Defaults to a |
Returns
stringInterfaces#
IconButtonLookInterface#
Visual options of an IconButton, shared with iconButtonClass.
interface IconButtonLookProperties
| Name | Type | Default | Description |
|---|---|---|---|
| active? | boolean | Toggled on / open: shows as the raised chip. | |
| overlay? | boolean | Room for badges / overlays positioned over the glyph. | |
| size? | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Button size. |
| tone? | 'danger' | 'neutral' | 'neutral' | Colour of the glyph. |
IconButtonPropsInterface#
Visual options of an IconButton, shared with iconButtonClass.
interface IconButtonProps extends IconButtonLook, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>Properties
| Name | Type | Default | Description |
|---|---|---|---|
active?from IconButtonLook | boolean | Toggled on / open: shows as the raised chip. | |
| children? | ReactNode | Badges and overlays (an unseen dot, a spinner) over the glyph. | |
| icon | ReactNode | An icon class ( | |
| label | string | Accessible name and default tooltip. Required, since the button has no text. | |
overlay?from IconButtonLook | boolean | Room for badges / overlays positioned over the glyph. | |
| render? | (props: IconButtonRenderProps) => ReactElement | Render another element with the button's look (a link). | |
size?from IconButtonLook | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Button size. |
tone?from IconButtonLook | 'danger' | 'neutral' | 'neutral' | Colour of the glyph. |
IconButtonRenderPropsInterface#
Props IconButtonProps.render receives to spread onto the element it renders.
interface IconButtonRenderPropsProperties
| Name | Type | Description |
|---|---|---|
| aria-label | string | Accessible name, taken from |
| children | ReactNode | The icon followed by any badges or overlays. |
| className | string | Classes carrying the button's look, merged with the caller's |
| data-active? | '' | Set to an empty string while the button is |
| title | string | Tooltip text. The |
Types#
IconButtonSizeType#
Size of an IconButton: xs (20px), sm (24px), md (28px) or lg (32px).
type IconButtonSize = keyof typeof SIZES