Buttons

import { Button } from 'cx/widgets';

Buttons are commonly used UI elements.

<Button onClick={() => { MsgBox.alert('Regular')}}>Regular</Button>
<Button pressed>Pressed</Button>
<Button disabled onClick={() => { MsgBox.alert('Disabled') }}>Disabled</Button>
<Button mod="primary" onClick={() => { MsgBox.alert('Primary') }}>Primary</Button>
<Button mod="danger"
    confirm="You clicked the danger button. Are you sure that you want to proceed?"
    onClick={() => {
        MsgBox.alert('Danger')
    }}>
    Danger
</Button>
<Button mod="hollow" icon="pencil">Icon + Text</Button>
<Button mod="hollow" icon="refresh" />

Copied!Cx Fiddle

index.js

// Use Cx based message boxes to display confirmation dialog
import { enableMsgBoxAlerts } from 'cx/widgets';
enableMsgBoxAlerts();

Copied!

To enable Cx based message box alerts, call enableMsgBoxAlerts() at startup of your application.

Configuration

Property	Description	Type
confirm	Confirmation text or configuration object. See MsgBox.yesNo for more details.	string/object
disabled	Set to `true` to disable the button.	boolean
enabled	Set to `false` to disable the button. Do not use both enabled and disabled on the same widget.	boolean
pressed	If `true` button appears in pressed state. Useful for implementing toggle buttons.	boolean
autoFocus	Set to `true` to automatically focus the element when mounted.	boolean
baseClass	Base CSS class to be applied to the element. Default is 'button'.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
dismiss	If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`.	boolean
focusOnMouseDown	Determines if button should receive focus on `mousedown` event. Default is `false`, which means that focus can be set only using the keyboard `Tab` key.	boolean
icon	Name of the icon to be put on the left side of the button.	string
innerHtml html	HTML to be injected into the element.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. Cx ships with `primary` and `danger` mods.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
submit	Add `type="submit"` to the button.	boolean
tag	HTML tag to be used. Default is `button`.	string
text innerText	Inner text contents.	string
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Buttons