ui/Button

Unstyled button components and behaviors to be customized by a theme or application.

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

Members

ButtonComponent

A minimally-styled button component with touch support.

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

ButtonBaseComponent

A basic button component structure without any behaviors applied to it.

import {ButtonBase} from '@enact/ui/Button';
Properties
componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/Button.Button, the ref prop is forwarded to this component as componentRef.

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 component class

  • bg - The background node of the button

  • client - The content node of the button

  • hasIcon - Applied when there is an icon present

  • icon - The icon node, when icon is set

  • large - Applied when size prop is 'large'

  • minWidth - Applied when minWidth prop is true

  • pressed - Applied when pressed prop is true

  • selected - Applied when selected prop is true

  • small - Applied when size prop is 'small'

disabled
Boolean

Applies the disabled class.

When true, the button is shown as disabled.

Default: false
icon
NodeBoolean

The icon displayed within the Button.

The icon will be displayed before the natural reading order of the text, regardless of locale. Any string that is valid for its ui/Button.Button.iconComponent is valid here. If icon is specified as a string and iconButton is undefined, the icon is not rendered.

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.

Setting this to true means the iconComponent will be rendered but with empty content. This may be useful if you've customized the iconComponent to render the icon content externally.

iconComponent
ComponentNode

The component used to render the icon.

This component will receive the icon class to customize its styling. If icon is not assigned or is false, this component will not be rendered.

If this is a component rather than an HTML element string, this component will also receive the size and iconFlip (as flip) properties and should be configured to handle it.

iconFlip
String

Flips the icon.

minWidth
Boolean

Enforces a minimum width for the component.

Applies the minWidth CSS class which can be customized by theming.

Default: true
pressed
Boolean

Indicates the component is depressed.

Applies the pressed CSS class which can be customized by theming.

Default: false
selected
Boolean

Indicates the component is selected.

Applies the selected CSS class which can be customized by theming.

Default: false
size
String

The size of the button.

Applies the CSS class which can be customized by theming.

ButtonDecoratorHigher-Order Component

A higher-order component that adds touch support to a ButtonBase.

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