Measured entry
originui-comp-84
A compact outlined action button with a trailing sparkle icon. It ships as a shadcn registry component that composes Origin UI's shared Button and a Lucide icon, with React, Tailwind theme classes, radix-ui, class-variance-authority, and a cn utility underneath.



Measured
Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 28.9 KB (94.3 KB build, 65.4 KB baseline) |
| Bare mode | FAIL |
| Provider required | NO |
| Demo used | written from the component source API |
What the harness recorded
BARE BUILD
✗ Build failed in 6.75s error during build: [vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/button.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'
Verdict
A dependable, narrowly useful variation rather than a distinctive component. It built and mounted cleanly with no detected accessibility or overflow issues, but it needs a shadcn-style setup because the bare project cannot resolve its shared cn utility.
Use it if
- You need a restrained secondary action with a small visual cue after the label.
- Your app already uses shadcn-style shared primitives and Tailwind theme tokens.
- You want a button that can inherit the shared primitive's variants and as-child composition.
Skip it if
- The sparkle does not communicate anything useful for the action.
- You need a standalone button with no registry aliases, shared utility, or theme-token setup.
- Your product uses a different button primitive or icon library and avoiding duplicate dependencies matters.
Install
| Declared dependencies | radix-ui |
|---|---|
| Missing on install | none |
| Bare install | fails once the shadcn-style helpers are removed, so it needs that setup |
| Provider | no provider required in the harness |
For a non-shadcn project, add React, Tailwind CSS with the referenced theme tokens, lucide-react, radix-ui, class-variance-authority, a cn class-merging utility, and the shared Button module. Configure the at-sign import alias or replace those imports with local paths.
Source and credit
This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.
Author repository
github.com/origin-space/originuiAlternatives
Other published entries for the button pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- neu-buttonneumorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 17.8KB
- Bare
- pass
- Prov
- NO
- clay-buttonclaymorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 18.2KB
- Bare
- pass
- Prov
- NO
- tripled-animated-radio-shadcnuiminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 58.2KB
- Bare
- pass
- Prov
- NO
- ruixen-glow-link-buttonliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 58.9KB
- Bare
- pass
- Prov
- NO
- tripled-mood-gradient-button-shadcnuigradient-glow
- Renders
- YES
- A11y
- 0
- Gzip
- 59.2KB
- Bare
- pass
- Prov
- NO
- ruixen-glass-ai-cardliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 59.5KB
- Bare
- pass
- Prov
- NO