Fyndiq-component-button NPM

fyndiq-component-button

A button component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-button

Usage

import React from 'react'
import Button from 'fyndiq-component-button'

// Normal usage
<Button onClick={() => console.log('clicked')}>
  My Button
</Button>

// Red button
<Button type="cancel">Cancel my task</Button>

// Bigger button
<Button size="l">My big button</Button>

// Custom className
<Button className="additional-styles">Button</Button>

// Disabled usage
<Button disabled>My disabled Button</Button>

// Render a link as a button
<Button link="#hello">My link</Button>

// Use a custom Link element
import { Link } from 'react-router-dom'

<Button link={<Link to="my/path" />}>
  My link
</Button>

// Render anything as a button
<Button type="primary" size="l">
  {({ className }) => (
    <header className={className}>
      My header
    </header>
  )}
</Button>

// Next.JS Link rendered as a button
import Link from 'next/link'
<Button type="primary" size="l" pill>
  {({ className }) => (
    <Link href="/link/">
      <a className={className}>
        My link
      </a>
    </Link>
  )}
</Button>

// Manipulate buttons as a group
import Button, { Wrapper } from 'fyndiq-component-button'

<Wrapper>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Wrapper>

// vertical layout
<Wrapper orientation="vertical">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Wrapper>

API

The component Button has the following customizable props:

Name	Type	Description	Default value
type	String	One of `primary`, `cancel`, `blue`, `inverted`. Changes the color style of the button	`normal`
htmlType	String	Set the original html type for `button`. See: MDN	`button`
className	String	Classname of the wrapping button	`''`
size	String	One of `xs`, `s`, `l`, `xl`. Changes the size of the button	`m`
disabled	Boolean	If true, will disable the button.	`false`
pressed	Boolean	Show the button as pressed	`false`
pill	Boolean	Rounds border-radius mode	`false`
link	String or Element	Uses an `<a>` tag or a custom element to render the button	`undefined`
onClick	Function	Callback when the button is pressed	`noop => noop`

The component Wrapper has the following customizable props:

Name	Type	Description	Default value
orientation	String	One of `horizontal` or `vertical`. Changes the flex-direction of the wrapper	`horizontal`
children	Element	Content of the Wrapper	`null`
className	String	Additionnal className for the wrapper	`''`
noOuterBorder	Boolean	Removes the outer border of the button group	`false`