1.3.0 • Published 4 years ago

@monstera/ui-components-button

Licence

ISC

Version

1.3.0

Deps

Size

17 kB

Vulns

Weekly

Stars

Summary Dependency Versions

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