InfoCard

Purpose

InfoCard displays information with optional icon, description, and right-side actions:

• Button, badge, or switch on the right
• Flexible content slots
• Responsive layout

When to use

Use InfoCard for:

• Settings rows with toggles
• Feature cards with action buttons
• Status displays with badges
• List items with actions

Basic usage

import InfoCard from '@/shared/ui/components/InfoCard'
import { Bell } from 'lucide-react'

// With switch
<InfoCard
  icon={<Bell className="h-5 w-5" />}
  title="Email notifications"
  description="Receive email updates about your account"
  switchProps={{
    defaultChecked: true,
    onChange: (checked) => console.log('Toggled:', checked),
  }}
/>

// With button
<InfoCard
  title="Export data"
  description="Download all your data as CSV"
  buttonProps={{
    label: 'Export',
    onClick: handleExport,
    variant: 'outline',
  }}
/>

// With badge
<InfoCard
  title="Current plan"
  description="You are on the Pro plan"
  badgeProps={{
    children: 'Pro',
    variant: 'secondary',
  }}
/>

Props

Prop	Type	Description
icon	ReactNode	Left-side icon
title	ReactNode	Primary text
description	ReactNode	Secondary text
className	string	Additional class
rightSlot	ReactNode	Custom right content (overrides other props)
buttonProps	ButtonConfig	Button configuration
badgeProps	BadgeConfig	Badge configuration
switchProps	SwitchConfig	Switch configuration

ButtonConfig

{
  label: ReactNode
  onClick?: () => void
  variant?: 'default' | 'outline' | 'ghost' | ...
  size?: 'sm' | 'default' | 'lg'
  className?: string
}

BadgeConfig

{
  children: ReactNode
  variant?: 'default' | 'secondary' | 'outline'
  className?: string
}

SwitchConfig

{
  defaultChecked?: boolean
  onChange?: (checked: boolean) => void
}

Notes

• Only one of buttonProps, badgeProps, or switchProps will render (priority in that order)
• Use rightSlot for completely custom right-side content
• Built on the Card primitive for consistent styling