limestone/Button

Limestone styled button components and behaviors.

Loading Live Preview

Import Usage

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

Members

Button   Component

A button component, ready to use in Limestone applications.

Usage:

<Button
backgroundOpacity="transparent"
size="small"
icon="home"
>
	Press me!
</Button>

Import Usage

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

Extends: limestone/Buttonlimestone/Button.ButtonBase
Wrapped with: limestone/Buttonlimestone/Button.ButtonDecorator

ButtonBase   Component

A button component.

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

Import Usage

import {ButtonBase} from '@enact/limestone/Button';

Extends: ui/Buttonui/Button.ButtonBase

Properties

backgroundOpacity

'opaque''transparent'

The background opacity of this button.

Text buttons and icon+text buttons, by default are opaque, while icon-only buttons default to transparent. This value can be overridden by setting this prop.

Valid values are: 'opaque', and 'transparent'.

Default: 'opaque'

---

bordered

Boolean

Adds a border to the button.

---

centered

Boolean

Centers the contents.

This requires that both the text and ui/Buttonui/Button.ButtonBase.icon are defined.

Applies the centered CSS class.

---

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

---

focusEffect

'expand''static'

Set the visual effect applied to the button when focused.

Default: 'expand'

---

iconPosition

'before''after'

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

Default: 'before'

---

minWidth

Boolean

Boolean controlling whether this component should enforce the "minimum width" rules.

NOTE: If you don't specify this prop, it works as false for icon only Button and as true for other Buttons.

---

roundBorder

Boolean

True if both sides of button are fully rounded.

---

shadowed

Boolean

Adds shadow to the text. It is only applied when the background opacity of the button is transparent.

---

size

'large''small'

The size of the button.

Default: 'large'

ButtonDecorator   Higher-Order Component

Applies Limestone specific behaviors to limestone/Buttonlimestone/Button.ButtonBase components.

Import Usage

import {ButtonDecorator} from '@enact/limestone/Button';

Includes: limestone/TooltipDecoratorlimestone/TooltipDecorator.TooltipDecorator
Includes: limestone/Marqueelimestone/Marquee.MarqueeDecorator
Includes: ui/Buttonui/Button.ButtonDecorator
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable