Quick Action

Beta

The main money actions under the balance, as tiles or circles; Primary is the one main action.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add quick-action
Also works with shadcn: npx shadcn@latest add @ritla/quick-action
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

quick-action.tsx

import { QuickAction } from "@/components/ui/quick-action";<QuickAction icon={PaperPlaneTiltIcon} href="/send" emphasis="primary">Send</QuickAction>

Prop	Type	Default	Description
`icon`	`IconComponent`	None	Figma's Icon.
`children`	`ReactNode`	None	The label.
`variant`	`"tile" \| "circle"`	`"tile"`	Figma's Style.
`emphasis`	`"default" \| "primary"`	`"default"`	Figma's Emphasis.
`href`	`string`	None	A link; without it, a button.