An icon button element which supports multiple sizes and colors.
import React from 'react';
import { IconButton } from '@minddrop/ui';
export const IconButtonDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<IconButton icon="settings" label="Settings" color="contrast" />
</div>
);
export default IconButtonDemo;
Import the component from the @minddrop/ui package.
import { IconButton, Icon } from '@minddrop/ui';
export default () => {
return <IconButton icon="close" label="Close" />;
};
IconButtonProps extends React.HTMLAttributes<HTMLButtonElement>.
| Prop | Type | Default |
|---|---|---|
icon | IconName | |
children | node | |
color | 'neutral' | 'light' | 'contrast' | 'neutral' |
as | React.ElementType | button |
disabled | boolean | |
label | string | |
size | 'small' | 'medium' | 'medium' |
Adheres to the Button WAI-ARIA design pattern.
| Key | Description |
|---|---|
| Space | Activates the button. |
| Enter | Activates the button. |