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', () => ); 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 |