Back to Polythene Icon Button main page

Icon Button component for Mithril

• Options
• Usage
  • Links
  • Label
• Appearance
  • Interactivity
  • Size
  • Styling
    • Themed component
    • CSS
    • Style
  • RTL (right-to-left) support
  • Dark or light tone

Options

Icon Button options

Usage

Icon Button takes an icon options object:

import m from "mithril"
import { IconButton } from "polythene-mithril"

const starsSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z\"/></svg>"

m(IconButton, {
  icon: { svg: { content: m.trust(starsSVG) } }
})

See Icon for more Icon options.

Alternatively, pass an Icon as child:

import m from "mithril"
import { Icon, IconButton, SVG } from "polythene-mithril"

const starsSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z\"/></svg>"

const StarIcon = m(Icon,
  m(SVG, m.trust(starsSVG))
)

m(IconButton, StarIcon)

Links

See: URLs and router links

Label

The Material Design specs do not specifically show a label with Icon Buttons, but Checkboxes with a custom icon provide the example how they should look like.

m(IconButton, {
  icon: { svg: { content: m.trust(starsSVG) } },
  label: "Label"
})

Appearance

Pass Button options to change the behaviour and appearance - see some examples below.

Interactivity

Disable hover and ripple effects:

m(IconButton, {
  icon: { svg: { content: m.trust(starsSVG) } },
  wash: false,
  ink: false
})

Alternatively, use inactive:

m(IconButton, {
  icon: { svg: { content: m.trust(starsSVG) } },
  inactive: true
})

Size

compact creates reduced padding:

m(IconButton, {
  icon: { svg: { content: m.trust(starsSVG) } },
  compact: true
})

Styling

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

You can find more information about theming in Theming.

Themed component

import { IconButtonCSS } from "polythene-css"

IconButtonCSS.addStyle(".themed-icon-button", {
  padding:                24,
  color_light_background: "purple",
  color_dark_background:  "orange",
  color_light:            "white"
})

m(IconButton, {
  className: "themed-icon-button"
})

To create a hover effect:

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

m(IconButton, {
  className: "hover-icon-button"
})

CSS

Change CSS using the Icon Button CSS classes.

Class names can be imported with:

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

The icon color is set with the CSS (text) color attribute of the parent element. For example:

.pe-button-icon {
  color: red;
}

Style

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

m(IconButton, {
  style: {
    color: "#FFCCBC",
    backgroundColor: "#4E342E"
  }
})

RTL (right-to-left) support

The direction of the Icon Button is flipped when:

• it is contained within an element that either has attribute dir="rtl" or has className pe-rtl
• has className pe-rtl--flip

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