Back to Polythene Button main page

Button component for React

• Options
• Usage
  • Links
  • Events
  • A row of buttons
  • Toggle buttons, split buttons
• Appearance
  • Variations
  • Styling
    • Themed component
    • CSS
    • Style
  • Dark or light tone

Options

Button options

Usage

import React from "react"
import { Button } from "polythene-react"

<Button label="Button" />

Links

See: URLs and router links

Events

Add an onClick event:

<Button
  label="Button"
  events={{
    onClick: () => console.log("click")
  }}
/>

A row of buttons

When placed inside an element with classname pe-button-row, buttons will get a side margin to set them apart. The row element itself will have an negative side margin so that the first button still lines up properly.

Toggle buttons, split buttons

Place a Button inside a Button Group to create a tightly aligned group of buttons.

Appearance

Variations

• Create a Contained Button appearance with contained: true
• Create a Raised Button appearance with raised: true
• Add a border with border: true
• The hover effect can be hidden with wash: false
• Special hover effects can be created with a theme, see below
• The ripple effect on click can be hidden with ink: false
• (To be updated for specs MD 2) Button contains no icon as this is not part of the Material Design guidelines; use Icon Button instead (which can contain a label)
• Add a dropdown icon with dropdown: true
• Create a wide button with extraWide: true
• Create a high label with highLabel: true

Styling

Below are examples how to change the Button appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { ButtonCSS } from "polythene-css"

ButtonCSS.addStyle(".bordered-button", {
  color_light_text:   "#673ab7",
  color_light_border: "#673ab7",
  color_dark_text:    "yellow",
  color_dark_border:  "yellow"
})

<Button
  label="Borders"
  className="bordered-button"
  border
/>

To create a hover effect:

ButtonCSS.addStyle(".hover-button", {
  color_light_hover:            "#fff",
  color_light_hover_background: "#673ab7",
  animation_duration:           "100ms",
})

<Button
  label="Hover"
  className="hover-button"
/>

CSS

Change CSS using the Button CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/button"

Style

Some style attributes can be set using option style. For example:

<Button
  style={{
    backgroundColor: "#EF6C00"
    color: "#fff"
  }}
/>

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set