LabeledCard
Card variant that pairs a tiny label above the body — used for compact stat or metadata blocks.
Card variant that pairs a tiny label above the body — used for compact stat or metadata blocks.
import { LabeledCard } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
isDark | Optional | boolean | — | — |
className | Optional | string | — | — |
hasNoWrap | Optional | boolean | — | — |
isRelative | Optional | boolean | — | — |
isFullWidth | Optional | boolean | — | — |
hasNoMargin | Optional | boolean | — | — |
hasNoBorder | Optional | boolean | — | — |
isFullHeight | Optional | boolean | — | — |
isScrollable | Optional | boolean | — | — |
label | Optional | React.ReactNode | — | — |
children | Optional | React.ReactNode | — | — |
getNavigateOptions | Optional | (label: string) => Partial<{ href: string; target: string; }> | — | — |
Usage
A generic card container with a header label, optional navigation link, and configurable layout modifiers.
Notes
- If
labelis the string'Miners with error', the label automatically receives an informational tooltip explaining that minor errors not affecting hashrate are excluded. getNavigateOptionsonly activates whenlabelis a plain string.
Example
/** * Runnable example for LabeledCard. */import { LabeledCard } from '@tetherto/mdk-react-devkit'const Placeholder = ({ text }: { text: string }) => ( <div style={{ padding: '12px 16px', background: 'var(--mdk-color-surface-secondary, #1a1a2e)', borderRadius: 4, color: 'var(--mdk-color-text-secondary, #888)', fontSize: 13, }} > {text} </div>)export const LabeledCardExample = () => ( <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> {/* Basic */} <LabeledCard label="Device Overview"> <Placeholder text="Device stats here" /> </LabeledCard> {/* Full width */} <LabeledCard label="Farm Summary" isFullWidth> <Placeholder text="Full-width card body" /> </LabeledCard> {/* Dark variant */} <LabeledCard label="Metrics" isDark> <Placeholder text="Dark card body" /> </LabeledCard> {/* No border */} <LabeledCard label="Borderless" hasNoBorder> <Placeholder text="Card without a border" /> </LabeledCard> {/* With navigation link on the label */} <LabeledCard label="Pool Statistics" getNavigateOptions={() => ({ href: '#pool-stats', target: '_self' })} > <Placeholder text="Click the label to navigate" /> </LabeledCard> </div>)