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

  • icon - The icon node, when icon is set

  • minWidth - Applied when minWidth prop is true

  • pressed - Applied when pressed prop is true

  • selected - Applied when selected prop is true

  • small - Applied when small prop is true

disabled
Boolean

Applies the disabled class.

When true, the button is shown as disabled.

Default: false
icon
Node

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.

iconComponent
Function

The component used to render the icon.

This component will receive the small property set on the Button as well as the icon class to customize its styling. If icon is not a string, this property is not used.

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
small
Boolean

Reduces the size of the component.

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

Default: false

ButtonDecoratorHigher-Order Component

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

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