Skip to content
Enact

ui/Button

Edit on GitHub

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

Members

Section titled “Members ”

Button   Component

Section titled “Button   Component ”

A minimally-styled button component with touch support.

Extends: ui/Buttonui/Button.ButtonBase
Wrapped with: ui/Buttonui/Button.ButtonDecorator

ButtonBase   Component

Section titled “ButtonBase   Component ”

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

Properties
componentRef
Section titled “componentRef”
ObjectFunction

Called with a reference to the root component.

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

css
Section titled “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
Section titled “disabled”
Boolean

Applies the disabled class.

When true, the button is shown as disabled.

Default: false
icon
Section titled “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/Buttonui/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
Section titled “iconComponent”
ComponentNode

The component used to render the ui/Buttonui/Button.ButtonBase.icon.

This component will receive the icon class to customize its styling. If ui/Buttonui/Button.ButtonBase.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
Section titled “iconFlip”
String

Flips the icon.

See: ui/Iconui/Icon.IconBase.flip
minWidth
Section titled “minWidth”
Boolean

Enforces a minimum width for the component.

Applies the minWidth CSS class which can be customized by /docs/developer-guide/theming//docs/developer-guide/theming/.

Default: true
pressed
Section titled “pressed”
Boolean

Indicates the component is depressed.

Applies the pressed CSS class which can be customized by /docs/developer-guide/theming//docs/developer-guide/theming/.

Default: false
selected
Section titled “selected”
Boolean

Indicates the component is selected.

Applies the selected CSS class which can be customized by /docs/developer-guide/theming//docs/developer-guide/theming/.

Default: false
size
Section titled “size”
String

The size of the button.

Applies the CSS class which can be customized by /docs/developer-guide/theming//docs/developer-guide/theming/.

ButtonDecorator   Higher-Order Component

Section titled “ButtonDecorator   Higher-Order Component ”

A higher-order component that adds touch support to a ui/Buttonui/Button.ButtonBase.

Includes: ui/Touchableui/Touchable.Touchable