Materialish

Action Chip

Action chips represent that an action will occur when a user clicks or touches it. They are an alternative to buttons.

🙌 Heads up! This code is editable. The preview above will update to reflect your changes.

Usage

import { ActionChip } from 'materialish';
import 'materialish/materialish.css';

Props

Prop NameDefault ValueDescription
childrenThe contents that are rendered within the chip
classNameAdditional class name(s) to add to the chip
rippletrueWhether or not to display the "ripple" effect
iconA Materialish icon element to render in the chip
nodeRefPass a ref to get access to the button element
...restOther props are placed on the root element

CSS Variables

VariableDefault ValueDescription
--mt-baseFontSize1remThe text size and dimensions of the chip are based off of this value
--mt-fontFamily'Roboto'The font family to use for the chip text
--mt-chip-rippleColor--mt-mainColor, #2196f3The color of the ripple will be based off of this value
--mt-chip-backgroundColor#e0dfe0The background color of the chip
--mt-chip-backgroundColorFocusrgba(51, 51, 51, 0.2)The background color of the chip when it is focused
--mt-chip-backgroundColorActive#d9edffThe background color of the chip when is active
--mt-chip-backgroundColorActiveFocusrgba(33, 150, 243, 0.2)The background color of the chip when it active and focused
--mt-chip-textColor#212121The text color for the chip
--mt-chip-textColorActive#005496The text color for the active chip

Useful Links