ByteBucks component showcase

Preview of reusable UI primitives — sizes, shapes, and states.

Typography

Text styles mapped from legacy static content and form labels.

body

Default body copy for forms and static content.

title

Section title

heading1

Heading level 1

heading2

Heading level 2

heading3

Heading level 3

heading4

Heading level 4

heading5

Heading level 5

heading6

Heading level 6

label

Form field label

highlight

Highlighted accent text

error

Validation error message

caption

Secondary caption text

Buttons

Variants, sizes, and shapes including solid accent primary.

primary

primary · sm · pill

primary · md · pill

primary · lg · pill

outline

outline · sm · pill

outline · md · pill

outline · lg · pill

ghost

ghost · sm · pill

ghost · md · pill

ghost · lg · pill

error

error · sm · pill

error · md · pill

error · lg · pill

Shapes

pill

rounded

circle

States

Text fields

Inputs with labels, validation, and loading states.

Sizes & shapes

sm · pill

Amount

sm · rounded

Amount

md · pill

Amount

md · rounded

Amount

lg · pill

Amount

lg · rounded

Amount

States

Default

With error

Please enter a valid email address

Disabled

Alert toasts

Layout-level toasts stack at the bottom. This demo auto-dismisses after 3 seconds; use the close button to dismiss immediately.