DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add badge prop to DTCard for bevel-clipped badge slot

Browse Source
This commit is contained in:
michael
2026-03-12 19:21:11 -07:00
parent 8a91b21a11
commit 2dcf86c346
1 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/DTCard.tsx
View File

@@ -33,6 +33,8 @@ interface DTCardProps {
growArea?: 'body' | 'title'; growArea?: 'body' | 'title';
className?: string; className?: string;
style?: CSSProperties; style?: CSSProperties;
/** Badge content rendered at bottom-right, clipped by card bevel */
badge?: ReactNode;
onClick?: () => void; onClick?: () => void;
} }
@@ -48,6 +50,7 @@ export function DTCard({
className, className,
style, style,
onClick, onClick,
badge,
}: DTCardProps) { }: DTCardProps) {
const shouldShowHeader = showHeader ?? !!(title || onDismiss); const shouldShowHeader = showHeader ?? !!(title || onDismiss);
const Tag = onClick ? 'button' : 'div'; const Tag = onClick ? 'button' : 'div';
@@ -90,6 +93,7 @@ export function DTCard({
</div> </div>
)} )}
{children} {children}
{badge && <div className="dt-card-badge">{badge}</div>}
</Tag> </Tag>
); );
} }