C&C Docs
Log in

cnc-button

A styled action control with semantic colors, visual kinds, icons, loading and toggle states, form submission, named content slots, and widget-level events.

Quick start

Put button text in the default slot or provide it through label. Listen for the widget's press event when the action belongs to application state.

Ready 
<div x-data="{ message: 'Ready' }">
  <cnc-button
    color="primary"
    icon="heroicons/check"
    @press="message = 'Saved'"
  >
    Save changes
  </cnc-button>
  <span x-text="message"></span>
</div>

Usage guidance

Reach for color to say what an action MEANS and kind to say how much weight it should carry: one kind="default" button per view is the primary action, and soft, plain or link keep everything around it subordinate. Prefer processing over disabling a button by hand during an in-flight request — it disables the control and explains why at the same time. Use toggle only for a state that persists after the click; a button that merely opens something is not pressed, and cnc-drop or cnc-popup already own that behaviour.

← Back to Widgets