Skip to content
Docs
Back to Components

QuickActionCard

@hua-labs/ui/data
v1.0.0

A clickable card component for quick actions. Can render as a link or button with various visual styles.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { QuickActionCard } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

변형

gradient
outline
solid

색상

버튼으로 사용

Props

이름타입기본값설명
title*string-Card title
descriptionstring-Card description
iconIconName | React.ReactNode-Icon to display
hrefstring-Link URL (renders as anchor)
onClick() => void-클릭 핸들러
variant"gradient" | "outline" | "solid""gradient"시각적 스타일 변형
color"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray""blue"Color theme
loadingbooleanfalseShow loading state

코드 예시

링크로 사용

QuickActionLink.tsxtsx
import { QuickActionCard } from "@hua-labs/ui/data";

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/data";

export function QuickActionButton() {
  return (
    <QuickActionCard
      title="Download Report"
      description="Get the latest report"
      icon="download"
      onClick={() => console.log("Download!")}
      variant="outline"
      color="green"
    />
  );
}