# Buttons Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--introduction ## Variants documented in Storybook - PrimaryButtons: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--primarybuttons - DangerButtons: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--dangerbuttons - NeutralButtons: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--neutralbuttons - IconButtons: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--iconbuttons ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Buttons. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Danger Buttons — Rectangle Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample1Demo = () => ( <> {/* Variant: Danger Button - Filled */} {/* Variant: Danger Button - Outline */} {/* Variant: Danger Button - Text */} {/* Variant: Danger Button - disabled */} ); export default ButtonsExample1Demo; ``` Angular: ```html ``` ### 2. Danger Buttons — Pill Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample2Demo = () => ( <> {/* Variant: Danger Pill Button - Filled */} {/* Variant: Danger Pill Button - Outline */} {/* Variant: Danger Pill Button - Text */} {/* Variant: Danger Pill Button - disabled */} ); export default ButtonsExample2Demo; ``` Angular: ```html ``` ### 3. Danger Buttons — Size HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample3Demo = () => ( <> {/* Variant: Danger Button - Extra Large */} {/* Variant: Danger Button - Large */} {/* Variant: Danger Button - Medium */} {/* Variant: Danger Button - Small */} {/* Variant: Danger Button - Extra Small */} ); export default ButtonsExample3Demo; ``` Angular: ```html ``` ### 4. Danger Buttons — Buttons with Spinner HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample4Demo = () => ( <> {/* Variant: Danger Button with Spinner - Filled */} {/* Variant: Danger Button with Spinner - Outline */} {/* Variant: Danger Button with Spinner - Text */} ); export default ButtonsExample4Demo; ``` Angular: ```html ``` ### 5. Danger Buttons — Buttons with Icon HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample5Demo = () => ( <> {/* Variant: Danger Button with Icon - Filled */} {/* Variant: Danger Button with Icon - Outline */} {/* Variant: Danger Button with Icon - Text */} ); export default ButtonsExample5Demo; ``` Angular: ```html ``` ### 6. Icon Buttons — Rectangle Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample6Demo = () => ( <> {/* Variant: Icon Button - Rectangle - Filled */} {/* Variant: Icon Button - Rectangle - Outline */} {/* Variant: Icon Button - Rectangle - Text */} {/* Variant: Icon Button - Rectangle - disabled */} ); export default ButtonsExample6Demo; ``` Angular: ```html ``` ### 7. Icon Buttons — Pill Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample7Demo = () => ( <> {/* Variant: Icon Button - Pill - Filled */} {/* Variant: Icon Button - Pill - Outline */} {/* Variant: Icon Button - Pill - Text */} {/* Variant: Icon Button - Pill - disabled */} ); export default ButtonsExample7Demo; ``` Angular: ```html ``` ### 8. Icon Buttons — Size HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample8Demo = () => ( <> {/* Variant: Icon Button - Extra Large */} {/* Variant: Icon Button - Large */} {/* Variant: Icon Button - Medium */} {/* Variant: Icon Button - Small */} {/* Variant: Icon Button - Extra Small */} ); export default ButtonsExample8Demo; ``` Angular: ```html ``` ### 9. Introduction — Introduction HTML: ```html

Components

Buttons

Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow.

Implementation Showcase

Visual demonstration of various button variants including Primary, Danger, and Icon styles.

Button Variants

Button Sizes

Icon Variants

Icon Sizes

CSS Class Reference

Quickly copy sizing and variant utility classes for Buttons.

Button Variants

Primary (Filled) ux4g-btn-primary

Primary Outline ux4g-btn-outline-primary

Primary Tonal ux4g-btn-tonal-primary

Primary Text ux4g-btn-text-primary

Danger (Filled) ux4g-btn-danger

Danger Outline ux4g-btn-outline-danger

Danger Text ux4g-btn-text-danger

Neutral Outline ux4g-btn-outline-neutral

Neutral Text ux4g-btn-text-neutral

Pill Shape ux4g-radius-full

Button Sizes

Extra Large ux4g-btn-xl

Large ux4g-btn-lg

Medium [Default] ux4g-btn-md

Small ux4g-btn-sm

Extra Small ux4g-btn-xs

Icon Button Variants

Base Icon Button ux4g-icon-btn

Filled Variant ux4g-icon-btn-primary

Outline Variant ux4g-icon-btn-outline-primary

Tonal Variant ux4g-icon-btn-tonal-primary

Text Variant ux4g-icon-btn-text-primary

Circular (Pill) ux4g-icon-btn-pill

Icon Button Sizes

Extra Large ux4g-icon-btn-xl

Large ux4g-icon-btn-lg

Medium [Default] ux4g-icon-btn-md

Small ux4g-icon-btn-sm

Extra Small ux4g-icon-btn-xs

``` React: ```jsx import React from 'react'; const ButtonsExample9Demo = () => ( <>

Components

Buttons

Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow.

Implementation Showcase

Visual demonstration of various button variants including Primary, Danger, and Icon styles.

{/* Primary Variants Showcase */}

Button Variants

{/* Button Sizes Showcase */}

Button Sizes

{/* Icon Button Variants Showcase */}

Icon Variants

{/* Icon Button Sizes Showcase */}

Icon Sizes

CSS Class Reference

Quickly copy sizing and variant utility classes for Buttons.

{/* Variant Classes */}

Button Variants

Primary (Filled) ux4g-btn-primary

Primary Outline ux4g-btn-outline-primary

Primary Tonal ux4g-btn-tonal-primary

Primary Text ux4g-btn-text-primary

Danger (Filled) ux4g-btn-danger

Danger Outline ux4g-btn-outline-danger

Danger Text ux4g-btn-text-danger

Neutral Outline ux4g-btn-outline-neutral

Neutral Text ux4g-btn-text-neutral

Pill Shape ux4g-radius-full

{/* Size Classes */}

Button Sizes

Extra Large ux4g-btn-xl

Large ux4g-btn-lg

Medium [Default] ux4g-btn-md

Small ux4g-btn-sm

Extra Small ux4g-btn-xs

{/* Icon Button Variants */}

Icon Button Variants

Base Icon Button ux4g-icon-btn

Filled Variant ux4g-icon-btn-primary

Outline Variant ux4g-icon-btn-outline-primary

Tonal Variant ux4g-icon-btn-tonal-primary

Text Variant ux4g-icon-btn-text-primary

Circular (Pill) ux4g-icon-btn-pill

{/* Icon Button Sizes */}

Icon Button Sizes

Extra Large ux4g-icon-btn-xl

Large ux4g-icon-btn-lg

Medium [Default] ux4g-icon-btn-md

Small ux4g-icon-btn-sm

Extra Small ux4g-icon-btn-xs

); export default ButtonsExample9Demo; ``` Angular: ```html

Components

Buttons

Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow.

Implementation Showcase

Visual demonstration of various button variants including Primary, Danger, and Icon styles.

Button Variants

Button Sizes

Icon Variants

Icon Sizes

CSS Class Reference

Quickly copy sizing and variant utility classes for Buttons.

Button Variants

Primary (Filled) ux4g-btn-primary

Primary Outline ux4g-btn-outline-primary

Primary Tonal ux4g-btn-tonal-primary

Primary Text ux4g-btn-text-primary

Danger (Filled) ux4g-btn-danger

Danger Outline ux4g-btn-outline-danger

Danger Text ux4g-btn-text-danger

Neutral Outline ux4g-btn-outline-neutral

Neutral Text ux4g-btn-text-neutral

Pill Shape ux4g-radius-full

Button Sizes

Extra Large ux4g-btn-xl

Large ux4g-btn-lg

Medium [Default] ux4g-btn-md

Small ux4g-btn-sm

Extra Small ux4g-btn-xs

Icon Button Variants

Base Icon Button ux4g-icon-btn

Filled Variant ux4g-icon-btn-primary

Outline Variant ux4g-icon-btn-outline-primary

Tonal Variant ux4g-icon-btn-tonal-primary

Text Variant ux4g-icon-btn-text-primary

Circular (Pill) ux4g-icon-btn-pill

Icon Button Sizes

Extra Large ux4g-icon-btn-xl

Large ux4g-icon-btn-lg

Medium [Default] ux4g-icon-btn-md

Small ux4g-icon-btn-sm

Extra Small ux4g-icon-btn-xs

``` ### 10. Neutral Buttons — Rectangle Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample10Demo = () => ( <> {/* Variant: Neutral Button - Outline */} {/* Variant: Neutral Button - Text */} {/* Variant: Neutral Button - disabled */} ); export default ButtonsExample10Demo; ``` Angular: ```html ``` ### 11. Neutral Buttons — Pill Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample11Demo = () => ( <> {/* Variant: Neutral Pill Button - Outline */} {/* Variant: Neutral Pill Button - Text */} {/* Variant: Neutral Pill Button - disabled */} ); export default ButtonsExample11Demo; ``` Angular: ```html ``` ### 12. Neutral Buttons — Size HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample12Demo = () => ( <> {/* Variant: Neutral Button - Extra Large */} {/* Variant: Neutral Button - Large */} {/* Variant: Neutral Button - Medium */} {/* Variant: Neutral Button - Small */} {/* Variant: Neutral Button - Extra Small */} ); export default ButtonsExample12Demo; ``` Angular: ```html ``` ### 13. Neutral Buttons — Buttons with Spinner HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample13Demo = () => ( <> {/* Variant: Neutral Button with Spinner - Outline */} {/* Variant: Neutral Button with Spinner - Text */} ); export default ButtonsExample13Demo; ``` Angular: ```html ``` ### 14. Neutral Buttons — Buttons with Icon HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample14Demo = () => ( <> {/* Variant: Neutral Button with Icon - Outline */} {/* Variant: Neutral Button with Icon - Text */} ); export default ButtonsExample14Demo; ``` Angular: ```html ``` ### 15. Primary Buttons — Rectangle Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample15Demo = () => ( <> {/* Variant: Primary Button - Filled */} {/* Variant: Primary Button - Outline */} {/* Variant: Primary Button - Tonal */} {/* Variant: Primary Button - Text */} {/* Variant: Primary Button - disabled */} ); export default ButtonsExample15Demo; ``` Angular: ```html ``` ### 16. Primary Buttons — Pill Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample16Demo = () => ( <> {/* Variant: Primary Pill Button - Filled */} {/* Variant: Primary Pill Button - Outline */} {/* Variant: Primary Pill Button - Tonal */} {/* Variant: Primary Pill Button - Text */} {/* Variant: Primary Pill Button - disabled */} ); export default ButtonsExample16Demo; ``` Angular: ```html ``` ### 17. Primary Buttons — Size HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample17Demo = () => ( <> {/* Variant: Primary Button - Extra Large */} {/* Variant: Primary Button - Large */} {/* Variant: Primary Button - Medium */} {/* Variant: Primary Button - Small */} {/* Variant: Primary Button - Extra Small */} ); export default ButtonsExample17Demo; ``` Angular: ```html ``` ### 18. Primary Buttons — Buttons with Spinner HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample18Demo = () => ( <> {/* Variant: Primary Button with Spinner - Filled */} {/* Variant: Primary Button with Spinner - Outline */} {/* Variant: Primary Button with Spinner - Tonal */} {/* Variant: Primary Button with Spinner - Text */} ); export default ButtonsExample18Demo; ``` Angular: ```html ``` ### 19. Primary Buttons — Buttons with Icon HTML: ```html ``` React: ```jsx import React from 'react'; const ButtonsExample19Demo = () => ( <> {/* Variant: Primary Button with Icon - Filled */} {/* Variant: Primary Button with Icon - Outline */} {/* Variant: Primary Button with Icon - Tonal */} {/* Variant: Primary Button with Icon - Text */} ); export default ButtonsExample19Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.