sandstone/Button

Sandstone styled button components and behaviors.

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

Members

ButtonComponent

A button component, ready to use in Sandstone applications.

Usage:

<Button
backgroundOpacity="transparent"
size="small"
icon="home"
>
	Press me!
</Button>
import Button from '@enact/sandstone/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/sandstone/Button';
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'
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

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

size
'large''small'

The size of the button.

Default: 'large'

ButtonDecoratorHigher-Order Component

Applies Sandstone specific behaviors to Button components.

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