shadcn.io is not affiliated with official shadcn/ui
Support Resolved Rating Success Block for React
A confirmation that a help-desk ticket is resolved: the ticket and its status, the agent's closing message in a bubble, a five-star rating you can press or move with the arrow keys, and a Reopen ticket button that flips the status.
Installation
Overview
Close a conversation with a question worth answering, using this confirmation page for React with Base UI. It is the Kettledesk page after an agent resolves a ticket, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over a corner-marked card ruled by Guides. Its first band is the ticket: number, subject, the day it closed and an outline Badge for its status. The second is the agent's closing message as a bubble beside an initials Avatar. The third asks how the help was with a labelled Rating you can press or move with the arrow keys, and a ghost Button, Reopen ticket, that flips the status in the page. The one primary is the Shine Button View all tickets, pinned to the foot of a phone's screen. For help desks, forms and any resolved request.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was saved or reopened. The ticket, the agent and the message are typed constants; choosing stars only keeps the score in the page, and Reopen ticket only changes the badge and the line under the card. To wire it, save the rating when it is chosen, send Reopen to your tickets endpoint (which should notify the agent), and render the badge from the ticket's real status.
How does the rating work with a keyboard?
Tab reaches the stars as one control. Arrow keys move the score one star at a time and the choice is saved at once; each star is named in words ("4 of 5, Very good"). The word under the stars repeats the choice, and a polite line says it was saved in this demo.
Does Reopen move anything?
No. The badge and the button's label swap in boxes of fixed width, so the card keeps its size. The button changes to "Mark resolved" so the action can be undone, and a polite line says what happened.
Is the message a chat?
No, it is the ticket's closing note, a single message in a bubble with the agent's initials, name and time. A conversation with a composer is a chat window, a different block.
Related
- Pro
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
- Pro
A confirmation after rating a trail: the average worked out from five counts, your own stars, a five-row distribution with your row outlined, and an optional comment in a disclosure with a textarea and Save.
- Pro
A confirmation after sending a feature request: the request with a four-word pipeline from Triage to Shipped, and four similar requests, each with a status and a Vote toggle that counts once and can be taken back.
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- Pro
Feedback Rating Dialog
Feedback and reportsA help desk's ended chat with a one-tap satisfaction dialog shown open: five drawn faces from very bad to great that record the score at once, then an optional comment with a question that fits the score.
- Pro
A bug-report confirmation inside an app panel: the issue number with a copy button, a triage badge, a five-item completeness list with a progress bar, and an Add button that opens a textarea and ticks the missing item locally.