enact logoEnact
Edit on GitHub

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
'translucent''lightTranslucent''transparent'

The background opacity of this button.

Valid values are:

  • 'translucent',

  • 'lightTranslucent', and

  • 'transparent'.

color
'red''green''yellow''blue'

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

  • large - Applied to a size='large' button

  • selected - Applied to a selected button

  • small - Applied to a size='small' button

iconPosition
'before''after'

Specifies on which side ('before' or 'after') of the text the icon appears.

Default: 'before'
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
size
'large''small'

The size of the button.

Default: 'small'

ButtonDecoratorHigher-Order Component

Applies Moonstone specific behaviors to Button components.

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