Skip to content

feat: add Toast component - #264

Draft
brandonmcconnell wants to merge 2 commits into
mainfrom
cursor/toast-component-31d2
Draft

brandonmcconnell wants to merge 2 commits into
mainfrom
cursor/toast-component-31d2

Conversation

@brandonmcconnell

@brandonmcconnell brandonmcconnell commented Oct 8, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Adds Toast, an inline message with an optional call to action and a close button.

  • variant: info, check, warning, or danger (same names as Callout)
  • action: { label, onClick }; pressing it runs onClick and closes the toast
  • dismissible (default true): shows the close button; onDismiss runs when it's pressed, and dismissLabel sets its accessible label
  • The icon and buttons stay centered on the first line of text when the message wraps. When the message would get narrower than 18rem, the buttons move below it, right-aligned.
  • Pass className="rounded-none" to run it edge to edge.
Light Dark
Toast variants, light Toast variants, dark
Wrapping and narrow toasts, light Wrapping and narrow toasts, dark

Test Plan

  • pnpm lint and pnpm build
  • Checked every story in Storybook in light and dark, including hover states, long text, and a narrow container
Open in Web Open in Cursor 

cursoragent and others added 2 commits October 8, 2026 19:46
Co-authored-by: Brandon McConnell <brandon@dreamthinkbuild.com>
Co-authored-by: Brandon McConnell <brandon@dreamthinkbuild.com>
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