Back to Components
bash
npm install @hua-labs/huatsx
import { QuickActionCard } from "@hua-labs/ui/advanced/dashboard";gradient
outline
solid
Props
title* | string | - | Card title |
description | string | - | Card description |
icon | IconName | React.ReactNode | - | Icon to display |
href | string | - | Link URL (renders as anchor) |
onClick | () => void | - | Click handler (renders as button) |
variant | "gradient" | "outline" | "solid" | "gradient" | Visual style variant |
color | "blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray" | "blue" | Color theme |
loading | boolean | false | Show loading state |
QuickActionLink.tsxtsx
import { QuickActionCard } from "@hua-labs/ui/advanced/dashboard";
export function BasicQuickActionCard() {
return (
<QuickActionCard
title="Create Order"
description="Quickly create a new order"
icon="plus"
href="/orders/new"
color="blue"
/>
);
}QuickActionButton.tsxtsx
import { QuickActionCard } from "@hua-labs/ui/advanced/dashboard";
export function QuickActionButton() {
return (
<QuickActionCard
title="Download Report"
description="Get the latest report"
icon="download"
onClick={() => console.log("Download!")}
variant="outline"
color="green"
/>
);
}