meowerse_
docs menu

Code

An inline code value, shown exactly as it is, with an optional copy button.

import { Code } from "@meowerse/ui"; · source packages/ui/src/components/Code.tsx

variants and states

meow.alxnko.dev
value
k3m9-X2p4-q8w1
with copy — try it in the demo below

try it

your invite code: k3m9-X2p4-q8w1

demo source
tsx
import { Code } from "@meowerse/ui";

export default function Demo() {
  return <p className="demo">your invite code: <Code value="k3m9-X2p4-q8w1" copy /></p>;
}

props

proptypedefaultrequired
valuestring the value to show, kept in its original case.—yes
copyboolean shows a copy button next to the value.falseno
classNamestring extra class names to append.—no

css custom properties

variabledarklight
--c-fg#ededeb#1a1a1c
--c-fg-subtle#8c8c88#5e5e5b
--c-line#232326#cfcec8
--c-surface#151517#dfded9
--font-mono"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospacesame
--fs-20.8125remsame
--r-m4pxsame
--r-s2pxsame
--sp-14pxsame
--sp-28pxsame

Classes: .mw-code. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

value

tsx
import { Code } from "@meowerse/ui";

<Code value="meow.alxnko.dev" />

html (needs @meowerse/ui/tokens.css)
<span class="mw-code"><code class="mono" data-case="preserve">meow.alxnko.dev</code></span>

with copy

tsx
import { Code } from "@meowerse/ui";

<Code value="k3m9-X2p4-q8w1" copy />

accessibility

  • The value keeps its case: what you see is what you copy.
  • The copy button is 44×44 px and named "copy".
  • Success is shown by the icon only and a refused clipboard is silent (audit U-19); that is fixed in the accounts redesign (sub-project 3).
keydoes
Tabreaches the copy button
Enter or Spacecopies

do and don't

do

  • Use it for ids, keys, codes and commands.

don't

  • Don't use it for ordinary words.