EssentialsFree component
Button
Buttons with clear loading, success, and error states. Choose the Radix, Base UI, or React Aria adapter that fits your project.
Preview
Open previewInstallation
Add button to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/aurora-button.jsonUsage
TSXUsage example
import { RadixButton } from "@/components/aurora/button/radix";
<RadixButton size="md" state="idle" variant="primary">
Save changes
</RadixButton>Props
Key options and their defaults.
variantprimary- Primary, secondary, quiet, or destructive visual treatment.
sizemd- Small, medium, or large control dimensions.
stateidle- Idle, loading, error, or success action state.
loadingLabelLoading…- Visible label used while the action is pending.
- Radix Slot, Base UI, and React Aria adapters share the same visual variants and state labels.
- Loading disables activation, reports aria-busy, and replaces the visible label with configurable progress text.
- Error and success states retain the action label and add screen-reader state text.