The icon-over-label action row from the balance card, with optional keyboard shortcuts shown on the controls rather than hidden in a help page.
Loading preview...
import { useState } from "react";
import { CreditCard, Plus, QrCode, Send } from "lucide-react";
import { Button } from "@/components/ui/klyv-quick-actions-utils/components-Button-Button";
import { Card } from "@/components/ui/klyv-quick-actions-utils/components-Card-Card";
import { QuickActions } from "@/components/ui/klyv-quick-actions";
import { Text } from "@/components/ui/klyv-quick-actions-utils/components-Text-Text";
function QuickActionsExample() {
const [last, setLast] = useState('none')
const [shortcuts, setShortcuts] = useState(true)
return (
<div className="flex w-full flex-col items-start gap-3">
<Card title="US Dollar" className="w-full max-w-[380px]">
<Text size="label" tone="faint" className="mt-3">
Your Balance
</Text>
<Text size="display" tabular className="mt-1">
$27,829.83
</Text>
<QuickActions
className="mt-5"
shortcuts={shortcuts}
actions={[
{ id: 'send', label: 'Send', icon: Send, primary: true, shortcut: 's', hint: 'Send money to a recipient', onSelect: () => setLast('Send') },
{ id: 'pay', label: 'Payments', icon: CreditCard, shortcut: 'p', hint: 'Pay a bill', onSelect: () => setLast('Payments') },
{ id: 'qr', label: 'QR', icon: QrCode, shortcut: 'q', hint: 'Show your payment code', onSelect: () => setLast('QR') },
{ id: 'more', label: 'More', icon: Plus, hint: 'Everything else', onSelect: () => setLast('More') },
]}
/>
</Card>
<div className="flex flex-wrap items-center gap-3">
<Button size="sm" variant="outline" onClick={() => setShortcuts((value) => !value)}>
{shortcuts ? 'Turn shortcuts off' : 'Turn shortcuts on'}
</Button>
<Text size="caption" tone="faint" role="status" aria-live="polite">
Last: {last}
{shortcuts ? ' · try Cmd+S' : ''}
</Text>
</div>
</div>
)
}
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><QuickActionsExample /></div></div>}