moonstone/Button

Moonstone styled button components and behaviors.

import Button from '@enact/moonstone/Button';

Members

ButtonComponent

A button component, ready to use in Moonstone applications.

Usage:

<Button
	backgroundOpacity="translucent"
	color="blue"
>
	Press me!
</Button>
import Button from '@enact/moonstone/Button';

ButtonBaseComponent

A button component.

This component is most often not used directly but may be composed within another component as it is within Button.

import {ButtonBase} from '@enact/moonstone/Button';
Properties
backgroundOpacity
String

The background opacity of this button.

Valid values are:

  • 'translucent',

  • 'lightTranslucent', and

  • 'transparent'.

color
String

The color of the underline beneath button's content.

Accepts one of the following color names, which correspond with the colored buttons on a standard remote control: 'red', 'green', 'yellow', 'blue'.

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • button - The root class name

  • bg - The background node of the button

  • selected - Applied to a selected button

  • small - Applied to a small button

minWidth
Boolean

Enforces a minimum width on the Button.

NOTE: This property's default is true and must be explicitly set to false to allow the button to shrink to fit its contents.

Default: true

ButtonDecoratorHigher-Order Component

Applies Moonstone specific behaviors to Button components.

import {ButtonDecorator} from '@enact/moonstone/Button';
ArrayBooleanFunctionModuleNumberObjectString