Button

import { Button } from 'cx/widgets';

Buttons trigger actions when clicked. They support various visual styles, icons, and built-in confirmation dialogs.

 <div className="flex flex-wrap gap-2 items-center">
  <Button>Regular</Button>
  <Button pressed>Pressed</Button>
  <Button disabled>Disabled</Button>
</div> 

Use pressed to show a toggled state, and disabled to prevent interaction.

Mods

Buttons support visual modifiers: primary for main actions, danger for destructive actions, and hollow for secondary actions.

 <div className="flex flex-wrap gap-2 items-center">
  <Button mod="primary">Primary</Button>
  <Button mod="danger">Danger</Button>
  <Button mod="hollow">Hollow</Button>
</div> 

Icons

Add icons using the icon prop. Buttons can have both icon and text, or just an icon.

 <div className="flex flex-wrap gap-2 items-center">
  <Button icon="search">Search</Button>
  <Button icon="plus" mod="primary">
    Add
  </Button>
  <Button icon="pencil" mod="hollow" />
  <Button icon="refresh-cw" mod="hollow" />
  <Button icon="x" mod="hollow" />
</div> 

Confirmation

Use the confirm prop to show a confirmation dialog before executing the onClick handler.

 <div className="flex flex-wrap gap-2 items-center">
  <Button
    mod="danger"
    confirm="Are you sure you want to delete this item?"
    onClick={() => MsgBox.alert("Item deleted!")}
  >
    Delete
  </Button>
</div> 

To enable CxJS-based confirmation dialogs, call enableMsgBoxAlerts() at application startup:

import { enableMsgBoxAlerts } from "cx/widgets";
enableMsgBoxAlerts();

Configuration

Property	Type	Description
`text`	`StringProp`	Button text content.
`icon`	`StringProp`	Name of the icon to display.
`mod`	`string`	Visual modifier: `primary`, `danger`, `hollow`.
`pressed`	`BooleanProp`	Shows the button in a pressed/toggled state.
`disabled`	`BooleanProp`	Disables the button.
`enabled`	`BooleanProp`	Inverse of disabled.
`confirm`	`string \| object`	Confirmation message or MsgBox configuration.
`dismiss`	`boolean`	If true, closes the parent overlay when clicked.
`submit`	`boolean`	Sets `type="submit"` for form submission.
`type`	`string`	Button type: `submit` or `button`. Default: `button`.
`focusOnMouseDown`	`boolean`	Allow focus on mouse click. Default: `false`.
`onClick`	`function`	Click handler: `(e, instance) => void`.