Bookend sets the leading and/or trailing child to its inherent size while the remaining
children fill the available space

---
### Example
![bookend](/assets/api/checkout-extensions/post-purchase/components/bookend.png)
```ts?title: "JS"

import {extend, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const bookend = root.createComponent(Bookend, {trailing: true}, [
    root.createComponent(TextField, {label: 'Discount'}),
    root.createComponent(Button, {plain: true}, 'Apply'),
  ]);

  root.appendChild(bookend);
});


```

```tsx?title: "React"

import {render, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <Bookend trailing>
      <TextField label="Discount" />
      <Button plain>Apply</Button>
    </Bookend>
  );
}


```



## Props
optional = ?

| Name | Type | Description |
| --- | --- | --- |
| leading? | <code>boolean</code> | Sets the leading child to its inherent size  |
| trailing? | <code>boolean</code> | Sets the trailing child to its inherent size  |
| alignment? | <code>"leading" &#124; "center" &#124; "trailing"</code> | Position children along the cross axis  |
| spacing? | <code>"xtight" &#124; "tight" &#124; "loose" &#124; "xloose"</code> | Adjust spacing between children  |