Code – Nextra

Composable

▸ Composable(props): Element

Defines a composable child inside of a Compose component

Parameters

Name	Type
`props`	`ComposableProps`

Returns

Element

Example

example.tsx

function Button({ asChild, children, ...props }) {
  const Composition = asChild ? Compose : "button";
  return (
    <Composition {...props}>
      Prefix <Composable>{children}</Composable>
    </Composition>
  );
}

import React from 'react'
import { Composition, Composable } from '@vtex/shoreline-components'

export default function App() {
return (<>
function Button({ asChild, children, ...props }){
const Composition = asChild ? Compose : 'button'
return (
<Composition {...props}>
Prefix <Composable>{children}</Composable>
</Composition>
)
}
</>
)}

Open Sandbox

Defined in

packages/components/src/compose/composable.tsx:17 (opens in a new tab)

Props Props