Skip to main content
⌘K
Last modified: 4/Oct/2024

CopyBox

Use the CopyBox component to display short, textual information with a descriptive label that a user is probably going to copy + paste into somewhere. E.g. referral ID, password, etc.

#Usage

import { CopyBox } from '@kinsta/stratus'

const MyComponent = () => (
  <CopyBox label="Copy box label" type="text" text="copyable text"/>
)

#Props

#text
string
The text to be copied
#isReadOnly
boolean
Set content to be readonly
true
#isDense
boolean
@deprecated It's going to be removed in a future version and will be replaced with size prop
false
#label
string | ReactElement<any, string | JSXElementConstructor<any>>
The label describing the component
#isDisabled
boolean
#type
"text" | "password"
text will show the text to be copied, while password hides it like a password
text
#copyButtonAriaLabel
string
The aria label given to the copy button
#onCopy
() => void
callback when the copy button is clicked

#Types

  • CopyBoxProps: props of the CopyBox component processed by stratus
  • CopyBoxInterface: CopyBoxProps extended by Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'>

Read more about types here