icon-button.md

Back to Polythene Icon Button main page

Icon Button component for React

• 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 React from "react"
import { IconButton } from "polythene-react"

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>

<IconButton icon={{ svg: { content: starsSVG } }} />

Instead of passing icon as option, the Icon component can be used as child:

import { IconButton, Icon } from "polythene-react"

<IconButton><Icon svg={{ content: starsSVG }} /></IconButton>

Or even:

import { IconButton, Icon, SVG } from "polythene-react"

<IconButton><Icon><SVG>{starsSVG}</SVG></Icon></IconButton>

See Icon for more Icon options.

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.

<IconButton label="Label"><Icon><SVG>{starsSVG}</SVG></Icon></IconButton>

Appearance

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

Interactivity

Disable hover and ripple effects:

<IconButton icon={{ svg: { content: starsSVG } }} wash={false} ink={false} />

Alternatively, use inactive:

<IconButton icon={{ svg: { content: starsSVG } }} inactive />

Size

compact reduces the button padding:

<IconButton icon={{ svg: { content: starsSVG } }} compact />

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

<IconButton
  icon={{ svg: { content: starsSVG } }}
  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",
})

<IconButton
  icon={{ svg: { content: starsSVG } }}
  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:

<FAB icon={{ svg: { content: starsSVG } }} 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