meetguru/src/components/elements/element-59dca300-db78-42e4-a7a6-0cbf22d3cc82/AI.md

name, description, keywords

name	description	keywords
ww-button	Configurable button component with styling, icons, and form submission capabilities.	button submit reset icon form styling

ww-button

Purpose: Renders a button element with configurable type, styling, and icon support. Ex: Button without icon: {"uid": "cta","tag": "ww-button","name": "Button","states": [],"props": {"default": { ... }},"styles": {"default": { "cursor":"pointer", ... }},"slots": {...}}

Properties:

• text: string|object - Button text content. Can be an object with {"lang":"text"} format (e.g: {"en":"English text","fr":"French text"})
• backgroundColor: string|null - Text background color
• buttonType: 'button'|'submit'|null - Button type
• disabled: boolean - Disables button
• hasLeftIcon: boolean - Shows left icon
• hasRightIcon: boolean - Shows right icon

Slots:

• leftIcon: (single icon. NOT AN ARRAY OF ELEMENTS) ww-icon - Left icon with right margin on the icon. Ex: {"uid":"left-icon-cta","tag":"ww-button","name":"With left icon","states":[],"props":{"default":{"hasLeftIcon":true}},"styles":{"default":{"color":"#ff0000","fontSize":"20px","cursor":"pointer"}},"slots":{"leftIcon":{"uid":"left-icon"}}} {"uid":"left-icon","tag":"ww-icon","name":"Left Icon","states":[],"props":{"color":"#ff0000","fontSize":"20","icon":"icon name"},"styles":{"default":{"margin":"0 12px 0 0"}}}
• rightIcon: (single icon. NOT AN ARRAY OF ELEMENTS) ww-icon - Right icon with left margin on the icon Ex: {"uid":"right-icon-cta","tag":"ww-button","name":"With right icon","states":[],"props":{"default":{"hasRightIcon":true}},"styles":{"default":{"color":"#ff0000","fontSize":"20px","cursor":"pointer"}},"slots":{"rightIcon":{"uid":"right-icon"}}} {"uid":"right-icon","tag":"ww-icon","name":"Right Icon","states":[],"props":{"color":"#ff0000","fontSize":"20","icon":"icon name"},"styles":{"default":{"margin":"0 0 0 12px"}}}

Features:

• Inherits ww-text properties
• Action triggering support
• Form submission integration
• Button color and size are not passed to the icons. These styles are mandatory on the icon props (no unit on icon).

Events:

• focus: Triggered when button receives focus. No payload.
• blur: Triggered when button loses focus. No payload.
• keydown: Triggered when a key is pressed while button has focus. No payload.
• keyup: Triggered when a key is released while button has focus. No payload.

States:

• focus: Applied when the button has focus.
• disabled: Applied when the button is disabled.
• active: Applied when the button is being pressed (during mousedown/touchstart/keydown).

Variables: none