8000 feat(design-system): add button CTA variant to Alert by gabrielle-svg · Pull Request #8203 · NangoHQ/nango · GitHub
[go: up one dir, main page]

Skip to content

feat(design-system): add button CTA variant to Alert - #8203

Merged
macko911 merged 3 commits into
masterfrom
design/alert-button-cta
Nov 6, 2026
Merged

macko911 merged 3 commits into
masterfrom
design/alert-button-cta

Conversation

@gabrielle-svg
@gabrielle-svg gabrielle-svg commented Nov 5, 2026 •
Copy link
Copy Markdown
Contributor

Context

Adds the Alert variant Status=Neutral, Size=Wide, Title=Yes, CTA=Button from the design system (Figma): a neutral banner on a panel surface with a primary button instead of a text link.

<Alert variant="neutral" size="wide" cta="button" onDismiss={…}>
    <Zap data-filled />
    <AlertTitle>Instant setup</AlertTitle>
    <AlertDescription>…</AlertDescription>
    <AlertActions>
        <Button variant="primary" size="md">Set up Intercom</Button>
    </AlertActions>
</Alert>

Changes

  • New optional cta="button" prop. Without it, existing alerts render exactly as before.
  • The types only allow cta="button" with variant="neutral" and the Wide size, the one combination the design defines.
  • With it, the alert gets a surface-panel background, a border-default border and rounded-ds-md radius. Layout reuses the Wide size.
  • An icon passed with data-filled is drawn filled in icon-link. Other icons keep the usual outline style.
  • The alert doesn't render the button. The call site passes a primary <Button size="md"> in AlertActions.

Testing

Storybook: Design System/Components/Alert → Button CTA. Check it in light and dark: panel background, border, 6px radius, 32px button, and a filled Zap icon.

Adds cta="button" for the Dharma "Status=Neutral, Size=Wide, Title=Yes, CTA=Button"
alert: panel surface, default border, 6px radius, a primary Button in AlertActions,
and a filled Zap icon in icon-link. Other icons stay outline.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions
github-actions Bot commented Nov 5, 2026 •
Copy link
Copy Markdown
Contributor

Preview Deploys

Preview Status URL Deploy Logs Last Updated
Webapp ✅ Ready Preview URL Deploy Logs 6 Nov 2026, 14:35 UTC
Storybook ✅ Ready Preview URL Deploy Logs 6 Nov 2026, 14:35 UTC

@cubic-dev-ai cubic-dev-ai Bot left a comment •
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All reported issues were addressed across 2 files

Reply with feedback, questions, or to request a fix.

View guided diff | Re-trigger cubic

Allow cta="button" only on neutral wide alerts, where it has a look.
Fill icons marked data-filled instead of keying off Lucide's
lucide-zap class, and drop the no-op `link` value.
@macko911
macko911 added this pull request to the merge queue Nov 6, 2026
Merged via the queue into master with commit 813dc40 Nov 6, 2026
40 checks passed
@macko911
macko911 deleted the design/alert-button-cta branch November 6, 2026 15:00

This branch was previously deployed

1 inactive deployment
development — ba561ce5 Deployed Nov 6, 2026 by macko911 via Storybook #1728
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

0