SGDS Button Component Skill

<sgds-button> is the standard action element for forms, dialogs, and navigation. Use it instead of a native <button> whenever SGDS styling and behaviour are needed.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

Quick Decision Guide

Which variant?

• Default action → primary (default)
• Secondary / non-destructive alternative → outline or ghost
• Destructive action (delete, remove) → danger combined with tone="danger" or keep tone="brand" for softer emphasis

Which tone?

• Standard brand color → brand (default)
• Destructive / irreversible action → danger