Components | DECKPLATE

Button

CMP-001

Variants

Sizes

Disabled

USAGE

import { Button } from "@/ui/button"

<Button variant="primary">Deploy</Button>
<Button variant="danger" size="lg">Terminate</Button>
<Button variant="outline" disabled>Locked</Button>

Prop	Type	Default	Description
variant	'primary' \| 'danger' \| 'outline' \| 'ghost'	'primary'	Visual style of the button
size	'sm' \| 'md' \| 'lg'	'md'	Size of the button
disabled	boolean	false	Disables the button
className	string	-	Additional arbitrary classes

Badge

CMP-002

Outline variants

ActiveOfflineStandbyAuthorized

Fill variants

Field TestedAlertWarning

USAGE

import { Badge } from "@/ui/badge"

<Badge>Default</Badge>
<Badge variant="fill-orange" dot>Active</Badge>
<Badge variant="outline-red">Critical</Badge>

Prop	Type	Default	Description
variant	'outline-orange' \| 'outline-red' \| 'outline-yellow' \| 'outline-white' \| 'fill-orange' \| 'fill-red' \| 'fill-yellow'	'outline-orange'	Visual style of the badge
dot	boolean	false	Shows a small status dot before the label
className	string	-	Additional arbitrary classes

Status Dot

CMP-003

Active / Online

Unit is operational and responding

Degraded / At Capacity

Unit is operating at degraded levels

Critical / Denied

Unit is in error or access denied

Offline / Unknown

Unit is not responding

USAGE

import { StatusDot } from "@/ui/status-dot"

<StatusDot aria-label="System status" variant="active" />
<StatusDot aria-label="Warning" variant="warning" pulse />
<StatusDot aria-label="Offline" variant="offline" size="lg" />

Prop	Type	Default	Description
aria-label	string	-	Required prop to make it accessible for screen readers
variant	'active' \| 'warning' \| 'danger' \| 'offline'	'offline'	Current status state
size	'sm' \| 'md' \| 'lg'	'md'	Size of the dot
pulse	boolean	false	Enables pulse animations. When enabled, disables glow.
disableGlow	boolean	false	Disables the glow shadow
className	string	-	Additional arbitrary classes

Progress Bar

CMP-004

NP400263 // PCKT RATE96%

IDNO. 02-10373368%

ITNO. 25.00 (BUILD)25%

Fuel Reserve

USAGE

import { ProgressBar } from "@/ui/progress-bar"

<ProgressBar value={72} label="Upload" />
<ProgressBar value={15} threshold={30} />
<ProgressBar value={100} hideValue />

Prop	Type	Default	Description
value	number	0	Progress value (0-100)
threshold	number	30	When `value <= threshold`, then the color turns red
hideValue	boolean	false	Optional prop to hide percentage value
label	string	-	Optional label text shown on top left of the bar
className	string	-	Additional arbitrary classes