Button-CTA - Basic Usage Examples

✨ Updated Design System: This page demonstrates the new color palette (green for success, pink for error, orange for warning) and Rajdhani typography for headings and buttons.

Example 1: Default Button

The simplest usage with only the required label prop. Uses default medium size and primary style.

Click the button to see output...

Example 2: Custom Label

Button with a custom action-oriented label.

Click the button to see output...

Example 3: With Event Handler

Button with a press event handler that performs an action.

Click the button to see output...

Example 4: Unavailable Actions

DesignerPunk does not support disabled states. If an action is unavailable, the button should not be rendered. For in-flight async operations, use the loading state instead.