{"component":{"aria":"Native <button type=\"button\"> carries the role implicitly. Set aria-label when the visible label is not descriptive (icon-only buttons). Critical variants must be paired with a confirmation step (modal, dialog, or undo affordance) — destructive actions one click away from completion are an anti-pattern.","category":"components","css":"/* Button — base + variant rules. CSS custom properties resolve from the active theme; component never hardcodes color. */\n.ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ps-space-3,8px);min-height:2.5rem;padding:0 var(--ps-space-5,16px);border:0;border-radius:var(--ps-corner-2,4px);font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.43;cursor:pointer;transition:background-color var(--ps-speed-2,120ms) var(--ps-ease-utility,cubic-bezier(.2,0,.4,1));white-space:nowrap}\n.ps-btn:focus-visible{outline:2px solid var(--ps-focus-ring,#234ed8);outline-offset:2px}\n.ps-btn[disabled]{cursor:not-allowed;background-color:var(--ps-interactive-primary-disabled,#e6e8ec);color:var(--ps-ink-disabled,#878d99)}\n.ps-btn--primary{background-color:var(--ps-interactive-primary,#234ed8);color:var(--ps-ink-on-interactive,#fff)}\n.ps-btn--primary:hover{background-color:var(--ps-interactive-primary-hover,#173ab1)}\n.ps-btn--primary:active{background-color:var(--ps-interactive-primary-pressed,#0c2785)}\n.ps-btn--secondary{background-color:var(--ps-interactive-secondary,#33373e);color:var(--ps-ink-on-interactive,#fff)}\n.ps-btn--secondary:hover{background-color:var(--ps-interactive-secondary-hover,#1f2125)}\n.ps-btn--secondary:active{background-color:var(--ps-interactive-secondary-pressed,#0e0f12)}\n.ps-btn--ghost{background-color:transparent;color:var(--ps-ink-primary,#0e0f12)}\n.ps-btn--ghost:hover{background-color:var(--ps-interactive-ghost-hover,#f5f6f8)}\n.ps-btn--ghost:active{background-color:var(--ps-interactive-ghost-pressed,#e6e8ec)}\n.ps-btn--critical{background-color:var(--ps-interactive-critical,#d24747);color:var(--ps-ink-on-critical,#fff)}\n.ps-btn--critical:hover{background-color:var(--ps-interactive-critical-hover,#a52323)}\n.ps-btn--critical:active{background-color:var(--ps-interactive-critical-pressed,#7d1414)}","description":"A trigger that initiates an action. Five variants — primary, secondary, ghost, critical, link — each with its own emphasis and use context.","display_name":"Button","html":"","name":"button","registry_type":"component","research_links":["primitive-vocabulary-rationale","design-philosophy"],"tabs_available":["accessibility","code","style","usage"],"variants":[{"css_class":"ps-btn ps-btn--primary","description":"The most prominent action on a surface. One per surface.","html":"<button type=\"button\" class=\"ps-btn ps-btn--primary\"><span class=\"ps-btn__label\">{{label}}</span></button>","name":"primary","tokens":["{semantic.interactive-primary}","{semantic.interactive-primary-hover}","{semantic.interactive-primary-pressed}","{semantic.ink-on-interactive}"]},{"css_class":"ps-btn ps-btn--secondary","description":"Lower-emphasis action. Pairs with a primary on the same surface.","html":"<button type=\"button\" class=\"ps-btn ps-btn--secondary\"><span class=\"ps-btn__label\">{{label}}</span></button>","name":"secondary","tokens":["{semantic.interactive-secondary}","{semantic.interactive-secondary-hover}","{semantic.ink-on-interactive}"]},{"css_class":"ps-btn ps-btn--ghost","description":"Minimal-emphasis action. Used in toolbars, table rows, and dense surfaces.","html":"<button type=\"button\" class=\"ps-btn ps-btn--ghost\"><span class=\"ps-btn__label\">{{label}}</span></button>","name":"ghost","tokens":["{semantic.interactive-ghost-hover}","{semantic.ink-primary}"]},{"css_class":"ps-btn ps-btn--critical","description":"Destructive action. Always paired with a confirmation step.","html":"<button type=\"button\" class=\"ps-btn ps-btn--critical\"><span class=\"ps-btn__label\">{{label}}</span></button>","name":"critical","tokens":["{semantic.interactive-critical}","{semantic.interactive-critical-hover}","{semantic.ink-on-critical}"]}],"wcag":{"contrast_text_to_background":">= 7:1 (semantic.ink-on-interactive vs semantic.interactive-primary)","focus_visible":true,"min_touch_target":"44x44 CSS pixels","target":"2.2 AAA"}},"tenant":"pointsav","theme":"pointsav-brand"}