@monstera/ui-components-button
v1.3.0
Published
Monstera Button Component
Downloads
12
Readme
Button
Buttons can be used for actions in a app, from submitting forms to menus or applying filters
Installation guide
yarn add @monstera/ui-components-button
# or
npm install @monstera/ui-components-button
Usage
Basic
import React from "react";
import {Button} from "@monstera/ui-components";
const MyApp = () => (
<div>
<Button size="medium">Login</Button>
<Button type="secondary" size="medium">Signup</Button>
</div>
)
Button with icon
import React from "react";
import { Edit } from 'react-feather'
import {Button} from "@monstera/ui-components";
const EditIcon = () => <Edit strokeWidth={2} size={18}/>
const MyApp = () => (
<Button label="Edit profile" Icon={EditIcon} />
)
Props
| Name | Type | Default Value | Available values | Description |
| --- | --- | --- | --- | --- |
| type
| string | primary
| primary
secondary
tertiary
| Applies styling according to styleguide |
| label
| string | ''
| - | The label of the button |
| size
| string | medium
| large
medium
small
| Defines the size of the button according to styleguide |
| disabled
| bool | false
| true
false
| Disables button when value is true
|
| fullWidth
| bool | false
| true
false
| Button takes the width of the container when value is true
|
| onClick
| function | null
| - | Callback function for click
event |
| className
| string | ''
| custom
| Component can accept custom styling |
| icon
| svg | ''
| any svg
| SVG Icon for the button |