Skip to main content
⌘K
Last modified: 19/Nov/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
#isLoading
boolean
Set the loading state of the component
#isDisabled
boolean
Set the disabled state of the copy button Set the disabled state of input
#copyButtonAriaLabel
string
The aria label given to the copy button
#onCopy
(() => void) & ClipboardEventHandler<HTMLInputElement>
Callback when the copy button is clicked
#isReadOnly
boolean
Set content to be readonly
true
#hasAutoFocus
boolean
Set that the input should be focused when rendered
#hasError
boolean
Set the error state of the input
#addonBefore
ReactNode
Content of the addon before the input box
#addonAfter
ReactNode
Content of the addon after the input box
#prefixItem
ReactNode
Content of the prefix of the input
#label
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the label
#description
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the description
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the error message
#unit
string
Sets the unit of the input

#Types

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

Read more about types here