MetricCard

A metric with trend and explanatory context.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { MetricCard } from '@vrum/ui';
import { MetricCardLabel, MetricCardValue, MetricCardTrend, MetricCardDescription } from '@vrum/ui';

<MetricCard
  variant={"default"}
  tonal={"green"}
>
  <MetricCardLabel>Active projects</MetricCardLabel><MetricCardValue>128</MetricCardValue><MetricCardTrend value={12.5} period="this month" /><MetricCardDescription>Across all workspaces</MetricCardDescription>
</MetricCard>

MetricCard props

Prop	Type	Default	Description
`variant`	`"default" \| "tonal" \| "compact" \| "detailed"`	`"default"`	Visual appearance within the Vrum design system.
`tonal`	`string`	`"neutral"`	tonal configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardLabel props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardValue props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardTrend props

Prop	Type	Default	Description
`value*`	`number`	none	Controlled value.
`period`	`string`	none	period configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

MetricCardDescription props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCard

A metric with trend and explanatory context.

Interactive playground

LIVE PREVIEW

Active projects

128

12.5% this month

Across all workspaces

Loading preview…

Generated code

import { MetricCard } from '@vrum/ui';
import { MetricCardLabel, MetricCardValue, MetricCardTrend, MetricCardDescription } from '@vrum/ui';

<MetricCard
  variant={"default"}
  tonal={"green"}
>
  <MetricCardLabel>Active projects</MetricCardLabel><MetricCardValue>128</MetricCardValue><MetricCardTrend value={12.5} period="this month" /><MetricCardDescription>Across all workspaces</MetricCardDescription>
</MetricCard>

MetricCard props

Prop	Type	Default	Description
`variant`	`"default" \| "tonal" \| "compact" \| "detailed"`	`"default"`	Visual appearance within the Vrum design system.
`tonal`	`string`	`"neutral"`	tonal configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardLabel props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardValue props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCardTrend props

Prop	Type	Default	Description
`value*`	`number`	none	Controlled value.
`period`	`string`	none	period configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

MetricCardDescription props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

MetricCard

Interactive playground

Props

MetricCard props

MetricCardLabel props

MetricCardValue props

MetricCardTrend props

MetricCardDescription props

MetricCard

Interactive playground

Props

MetricCard props

MetricCardLabel props

MetricCardValue props

MetricCardTrend props

MetricCardDescription props