# Button ## Examples ### Default ```html Click me ``` ### FullWidth ```html Full Width Button ``` ### WithIcon ```html Click me Click me ``` ### Variants ```html ${Object.values(ButtonVariant).map( (variant) => html`

${variant}

${variant} link

` )} ``` ### Sizes ```html ${Object.values(ButtonSize).map( (size) => html`

Size ${size}

` )} ``` ### IconOnly ```html ${Object.values(ButtonVariant).map( (variant) => html` ${Object.values(ButtonSize).map( (size) => html`

` )} ` )} ``` ### Loading ```html Loading ``` ### ClickedButton ```html Click me ``` ### PlainWithUnderline ```html Underlined Plain Button ``` ### AllSizesWithIcons ```html ${Object.values(ButtonSize).map( (size) => html`

Size ${size}

` )} ``` ### FullWidthWithIcons ```html

Full Width Button

``` ## Usage - **Primary** variant: Used for the main action on a page, such as “Submit” or “Next.” Only one primary button should be used per section to emphasize the most important action (main call-to-action). - **Default** variant: Used for less prominent actions, providing alternatives to the primary action. - **Plain** variant: Used for actions that have the lowest emphasis or are less critical. - **Danger** variant: Used for actions that have a high risk of negative outcomes, such as deleting data, stopping a service, or other irreversible actions. This button should be used sparingly and only when the user needs to be clearly warned about the consequences of the action. - **Disabled**: Indicates an action that is not currently available. Disabled buttons are unclickable and visually distinct. ## Other Considerations - **Text clarity:** Ensure the button text clearly describes the action it will trigger. Use verbs like “Save,” “Delete,” or “Learn more.” - **Consistent text:** Button labels should be concise, ideally no more than 2-3 words. - **Action-oriented:** Button text should be specific and action-oriented (e.g., use “Submit form” rather than just “Submit” when appropriate).