components / 01

marked button

a native button that draws attention when someone actually interacts with it.

shadcnnpx shadcn@latest add berkantay/cheez/marked-button
live

playground

hover, focus, or press it
variant
size
character
mark
ink
<MarkedButton
  variant="outline"
  size="medium"
  mark="rounded-box"
  character="rushed"
  markColor="#ff4f2e"
>
  save changes
</MarkedButton>
behavior

states

native semantics, Cheez feedback
default
hover redraw
focus visible
pressed
loading
disabled
visual hierarchy

variants and sizes

outline
solid
quiet
reference

api

also accepts every native button prop
proptypedefaultpurpose
variant"outline" | "solid" | "quiet""outline"visual treatment
size"small" | "medium" | "large""medium"button dimensions
markCheezType"rounded-box" / "underline"frame mark, or the quiet interaction mark
character"calm" | "rushed" | "chaotic""rushed"drawing personality
markColorstring"#ff4f2e"any valid CSS color
fillColorstring"#f4f0e6"SVG fill used by the solid variant
thicknessnumber1stroke-weight multiplier
markedbooleanundefinedcontrols boundary visibility
loadingbooleanfalsesets aria-busy and prevents repeated submission
loadingLabelReactNode"working"content announced while loading
disabledbooleanfalsenative disabled state

behavior notes

  • renders a real button and forwards its ref
  • keyboard focus receives the same mark as pointer hover
  • loading sets aria-busy and blocks duplicate clicks
  • reduced-motion behavior comes from the shared Cheez engine
  • no Framer Motion and no animated layout