fyndiq-component-button

fyndiq-component-button

Preview

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