moonstone/ Button
Exports the moonstone/Button.Button and moonstone/Button.ButtonBase components. The default export is moonstone/Button.Button.
<Button small>Click me</Button>
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
Transformation to apply to the text of the Button. By default, text is transformed to uppercase.
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
The background-color opacity of this button; valid values are
'opaque'
,'translucent'
,'lightTranslucent'
, and'transparent'
.Default: 'opaque'- color
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
When
true
, the {@glossary button} is shown as disabled and does not generateonClick
{@glossary event}.Default: false- icon
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
A boolean parameter affecting the minimum width of the button. When
true
, the minimum width will be set to 180px (or 130px if small istrue
). Iffalse
, 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 ✘
When
true
, the button does not animate on pressThis is deprecated.
Default: false- pressed
When
true
, a pressed visual effect is applied to the buttonDefault: false- selected
When
true
, a selected visual effect is applied to the button- small
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
Classes to apply to the background of the button, used on a child of button
- selected
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';