A button element which supports multiple variants, sizes, and colors.
import React from 'react';
import { Button } from '@minddrop/ui';
export const ButtonDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button>Button</Button>
</div>
);
export default ButtonDemo;
Import the component from the @minddrop/ui package.
Buttons with an i18n label are labeled by passing the i18n key to the label prop.
import { Button } from '@minddrop/ui';
export const SaveButton = ({ onClick }) => {
return <Button label="save" variant="primary" onClick={onClick} />;
};
Buttons without an i18n label are labeled by passing the label directly as the button's children.
import { Button } from '@minddrop/ui';
export const LikeButton = ({ onClick, count }) => {
return (
<Button startIcon="heart" onClick={onClick}>
{count}
</Button>
);
};
Buttons with an href prop are rendered using an a as the root element.
import { Button } from '@minddrop/ui';
export const DocsLink = ({ onClick, count }) => {
return (
<Button variant="text" href="https://developer.minddrop.app">
Developer Docs
</Button>
);
};
ButtonProps extends React.HTMLAttributes<HTMLButtonElement>.
LinkButtonProps extends React.HTMLAttributes<HTMLAnchorElement>.
| Prop | Type | Default |
|---|---|---|
children | node | |
disabled | boolean | false |
endIcon | IconName | ReactElement | |
fullWidth | boolean | false |
href | string | |
label | string | |
size | 'small' | 'medium' | 'large' | 'medium' |
startIcon | IconName | ReactElement | |
startIconName | IconName | |
variant | 'neutral' | 'primary' | 'danger' | 'text' | 'neutral' |
Adheres to the Button WAI-ARIA design pattern.
| Key | Description |
|---|---|
| Space | Activates the button. |
| Enter | Activates the button. |