---
title: Bookend
description: >-
  Bookend sets the leading and/or trailing child to its inherent size while the
  remaining children fill the available space.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/bookend
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/bookend.md
---

# Bookend

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

***

### Example

![bookend](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/bookend-CwUyRiN9.png)

##### JS

```ts
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);
});
```

##### React

```tsx
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? | `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 |

***