Back to Polythene Button main page

Button component for Mithril

• 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 m from "mithril"
import { Button } from "polythene-mithril"

m(Button, {
  label: "Button"
})

Links

Add a route URL.

For Mithril 2.x:

m(Button, {
  label: "Button",
  element: m.route.Link,
  url: {
    href: "/index",
  }
})

For Mithril 1.x:

m(Button, {
  label: "Button",
  url: {
    href: "/index",
    oncreate: m.route.link
  }
})

See also: URLs and router links

Events

Add an onclick event:

m(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"
})

m(Button, {
  label: "Borders",
  className: "bordered-button",
  border: true
})

To create a hover effect:

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

m(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:

m(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