Enact

moonstone/Button

Exports the moonstone/Button.Button and moonstone/Button.ButtonBase components. The default export is moonstone/Button.Button.

<Button small>Click me</Button>
CLICK ME
import Button from '@enact/moonstone/Button';

Members

ButtonComponent

moonstone/Button.Button is a Button with Moonstone styling, Spottable and Pressable applied. If the Button's child component is text, it will be uppercased unless casing is set.

Usage:

<Button>Press me!</Button>
import Button from '@enact/moonstone/Button';
Properties
casing
String

Transformation to apply to the text of the Button. By default, text is transformed to uppercase.

See: i18n/Uppercase#casing
Default: 'upper'

ButtonBaseComponent

moonstone/Button.ButtonBase is a stateless Button with Moonstone styling applied. In most circumstances, you will want to use the Pressable and Spottable version: moonstone/Button.Button

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

The background-color opacity of this button; valid values are 'opaque', 'translucent', 'lightTranslucent', and 'transparent'.

Default: 'opaque'
color
String

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

disabled
Boolean

When true, the {@glossary button} is shown as disabled and does not generate onClick {@glossary event}.

Default: false
icon
Node

Include an icon in your button. The icon will be displayed before the natural reading order of the text, regardless of locale. Any string that is valid for the Icon component is valid here. icon is outside the marqueeable content so it will not scroll along with the text content of your button. This also supports a custom icon, in the form of a DOM node or a Component, with the caveat that if you supply a custom icon, you are responsible for sizing and locale positioning of the custom component.

minWidth
Boolean

A boolean parameter affecting the minimum width of the button. When true, the minimum width will be set to 180px (or 130px if small is true). If false, the minimum width will be set to the current value of @moon-button-height (thus forcing the button to be no smaller than a circle with diameter @moon-button-height).

Default: true
noAnimation ✘
Boolean

When true, the button does not animate on press

This is deprecated.

Default: false
pressed
Boolean

When true, a pressed visual effect is applied to the button

Default: false
selected
Boolean

When true, a selected visual effect is applied to the button

small
Boolean

A boolean parameter affecting the size of the button. If true, the button's diameter will be set to 60px. However, the button's tap target will still have a diameter of 78px, with an invisible DOM element wrapping the small button to provide the larger tap zone.

Default: false

ButtonBaseFactoryComponent Factory❌

This is deprecated.

moonstone/Button.ButtonBaseFactory is Factory wrapper around moonstone/Button.ButtonBase that allows overriding certain classes at design time. The following are properties of the css member of the argument to the factory.

Usage:

import css from './CustomButton.less';
import {ButtonFactory} from '@enact/moonstone/Button';
const Button = ButtonFactory({
    css: {
        bg: css.bg,
        selected: css.selected
    }
});
import {ButtonBaseFactory} from '@enact/moonstone/Button';
Properties
bg
String

Classes to apply to the background of the button, used on a child of button

selected
String

Classes to apply to the selected state of the button, applied to the base element

ButtonFactoryComponent Factory❌

This is deprecated.

moonstone/Button.ButtonFactory is Factory wrapper around moonstone/Button.Button that allows overriding certain classes at design time. See moonstone/Button.ButtonBaseFactory.

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