Code

Inline code, soft, outlined or plain.

The product lives at /products/linen-shirt in the Products root.

const Product = Config.document('Product', {
  fields: {
    title: Field.text('Title'),
    price: Field.number('Price')
  }
})

Code.tsx

import {Code, Text} from 'alinea/components'

export function CodeExample() {
  return (
    <div style={{display: 'grid', gap: 12, width: 420}}>
      <Text as="p">
        The product lives at <Code>/products/linen-shirt</Code> in the{' '}
        <Code variant="outline">Products</Code> root.
      </Text>
      <Code block>
        {`const Product = Config.document('Product', {
  fields: {
    title: Field.text('Title'),
    price: Field.number('Price')
  }
})`}
      </Code>
    </div>
  )
}

Props

PropTypeDefaultDescription

variant'soft' | 'outline' | 'ghost'Default 'soft'

size'sm' | 'default'Default 'default'

blockbooleanDefault –Render a multi-line block (pre) instead of inline code

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.