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

```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', () => );
function App() {
return (
);
}
```
## Props
optional = ?
| Name | Type | Description |
| --- | --- | --- |
| leading? | boolean
| Sets the leading child to its inherent size |
| trailing? | boolean
| Sets the trailing child to its inherent size |
| alignment? | "leading" | "center" | "trailing"
| Position children along the cross axis |
| spacing? | "xtight" | "tight" | "loose" | "xloose"
| Adjust spacing between children |