# Composant de case pour les applications Stripe Utilisez les composants Box pour envelopper les autres composants et ajouter des styles et mises en page personnalisés. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/box?app-sdk-version=8. Pour ajouter le composant `Box` à votre application : ```js import {Box} from '@stripe/ui-extension-sdk/ui'; ``` Les boîtes sont des éléments de niveau bloc équivalents à un élément HTML `div`. Elles prennent en charge les [styles personnalisés](https://docs.stripe.com/stripe-apps/style.md#custom-styles). Si vous souhaitez afficher ou styliser des éléments de type Inline, reportez-vous à la section consacrée au composant [Inline](https://docs.stripe.com/stripe-apps/components/inline.md). ### Propriétés des boîtes | Propriété | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `css` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/box.md#css). | ### CSS | Propriété | Type | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignSelfX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignSelfY` | (Facultatif) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` Alignement vertical. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignY` | (Facultatif) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` Alignement vertical. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `backgroundColor` | (Facultatif) `("container" | "surface") | undefined` | | `bleed` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `borderBottomColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderBottomLeftRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomRightRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderBottomWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderLeftColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderLeftStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderLeftWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderRightColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderRightStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderRightWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderTopLeftRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopRightRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `bottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `boxShadow` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `color` | (Facultatif) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `columnGap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `display` | (Facultatif) `"grid" | undefined` | | `distribute` | (Facultatif) `("packed" | "space-between") | undefined` | | `fill` | (Facultatif) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `focusRing` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `font` | (Facultatif) `("body" | "bodyEmphasized" | "caption" | "heading" | "kicker" | "lead" | "subheading" | "subtitle" | "title") | undefined` | | `fontFamily` | (Facultatif) `("monospace" | "ui") | undefined` | | `fontWeight` | (Facultatif) `("regular" | "semibold" | "bold") | undefined` | | `gap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gridColumns` | (Facultatif) `number | undefined` | | `height` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `inset` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `keyline` | (Facultatif) `("neutral" | "critical") | undefined` | | `left` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `margin` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `maxHeight` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `maxWidth` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `minHeight` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `minTileWidth` | (Facultatif) `(number | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` | | `minWidth` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `overflow` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowWrap` | (Facultatif) `("break-word" | "normal") | undefined` | | `overflowX` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowY` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `padding` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `rowGap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `stack` | (Facultatif) `("x" | "y" | "z") | undefined` | | `textAlign` | (Facultatif) `("center" | "end" | "justify" | "left" | "match-parent" | "right" | "start") | undefined` | | `textOverflow` | (Facultatif) `"ellipsis" | undefined` | | `textTransform` | (Facultatif) `("capitalize" | "uppercase" | "lowercase" | "none" | "full-width" | "full-size-kana") | undefined` | | `top` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `topShadow` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `whiteSpace` | (Facultatif) `("normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces") | undefined` | | `width` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `wordBreak` | (Facultatif) `("normal" | "break-all" | "keep-all" | "break-word") | undefined` | | `wordWrap` | (Facultatif) `("break-word" | "normal") | undefined` | | `wrap` | (Facultatif) `("wrap" | "nowrap" | "wrap-reverse") | undefined` | | `zIndex` | (Facultatif) `("overlay" | "partial") | undefined` | | `background` | (Facultatif)(Obsolète) Utilisez plutôt la propriété `backgroundColor`. `("container" | "surface") | undefined` | | `isolatedDependencies` | (Facultatif)(Obsolète) `string[] | undefined` | | `layout` | (Facultatif)(Obsolète) Utilisez plutôt la propriété `stack`. `("column" | "inline" | "row" | "inline-column" | "inline-row") | undefined` | | `when` | (Facultatif)(Obsolète) Utilisez plutôt des styles imbriqués. `(string | { pointer: "none" | "coarse" | "fine"; colorScheme: "dark" | "light"; motion: "supported" | "reduced"; hover: "none" | "hover"; viewportWidth: "small" | "medium" | "large" | "xlarge"; contrast: "more" | "less"; }[] | { pointer: "none" | "coarse" | "fine"; colorScheme: "dark" | "light"; motion: "supported" | "reduced"; hover: "none" | "hover"; viewportWidth: "small" | "medium" | "large" | "xlarge"; contrast: "more" | "less"; }) | undefined` | ## Imbrication de boîtes Vous pouvez utiliser une boîte pour gérer la mise en page et l’espacement des enfants de certains composants. Par exemple, imbriquez une boîte dans un composant [AccordionItem](https://docs.stripe.com/stripe-apps/components/accordion.md) pour ajouter des marges intérieures : ## CSS Custom Le composant `Box` prend en charge les [styles personnalisés](https://docs.stripe.com/stripe-apps/style.md#custom-styles). Cet exemple illustre l’utilisation de la propriété `boxShadow`. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/box?app-sdk-version=9. Pour ajouter le composant `Box` à votre application : ```js import {Box} from '@stripe/ui-extension-sdk/ui'; ``` Les boîtes sont des éléments de niveau bloc équivalents à un élément HTML `div`. Elles prennent en charge les [styles personnalisés](https://docs.stripe.com/stripe-apps/style.md#custom-styles). Si vous souhaitez afficher ou styliser des éléments de type Inline, reportez-vous à la section consacrée au composant [Inline](https://docs.stripe.com/stripe-apps/components/inline.md). ### Propriétés des boîtes | Propriété | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `css` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/box.md#css). | ### CSS | Propriété | Type | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignSelfX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignSelfY` | (Facultatif) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` Alignement vertical. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `alignY` | (Facultatif) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` Alignement vertical. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `backgroundColor` | (Facultatif) `("container" | "surface") | undefined` | | `bleed` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `borderBottomColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderBottomLeftRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomRightRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderBottomWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderLeftColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderLeftStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderLeftWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderRightColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderRightStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderRightWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopColor` | (Facultatif) `("neutral" | "critical") | undefined` | | `borderTopLeftRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopRightRadius` | (Facultatif) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopStyle` | (Facultatif) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `borderWidth` | (Facultatif) `number | undefined` Largeur de la bordure. | | `bottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `boxShadow` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `color` | (Facultatif) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `columnGap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `display` | (Facultatif) `"grid" | undefined` | | `distribute` | (Facultatif) `("packed" | "space-between") | undefined` | | `fill` | (Facultatif) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `focusRing` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `font` | (Facultatif) `("body" | "bodyEmphasized" | "caption" | "heading" | "kicker" | "lead" | "subheading" | "subtitle" | "title") | undefined` | | `fontFamily` | (Facultatif) `("monospace" | "ui") | undefined` | | `fontWeight` | (Facultatif) `("regular" | "semibold" | "bold") | undefined` | | `gap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gridColumns` | (Facultatif) `number | undefined` | | `height` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `inset` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `keyline` | (Facultatif) `("neutral" | "critical") | undefined` | | `left` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `margin` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `maxHeight` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `maxWidth` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `minHeight` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Hauteur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `minTileWidth` | (Facultatif) `(number | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` | | `minWidth` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `overflow` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowWrap` | (Facultatif) `("break-word" | "normal") | undefined` | | `overflowX` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowY` | (Facultatif) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `padding` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingBottom` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingLeft` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingRight` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingTop` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingX` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingY` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `rowGap` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `stack` | (Facultatif) `("x" | "y" | "z") | undefined` | | `textAlign` | (Facultatif) `("center" | "end" | "justify" | "left" | "match-parent" | "right" | "start") | undefined` | | `textOverflow` | (Facultatif) `"ellipsis" | undefined` | | `textTransform` | (Facultatif) `("capitalize" | "uppercase" | "lowercase" | "none" | "full-width" | "full-size-kana") | undefined` | | `top` | (Facultatif) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `topShadow` | (Facultatif) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `whiteSpace` | (Facultatif) `("normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces") | undefined` | | `width` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | | `wordBreak` | (Facultatif) `("normal" | "break-all" | "keep-all" | "break-word") | undefined` | | `wordWrap` | (Facultatif) `("break-word" | "normal") | undefined` | | `wrap` | (Facultatif) `("wrap" | "nowrap" | "wrap-reverse") | undefined` | | `zIndex` | (Facultatif) `("overlay" | "partial") | undefined` | ## Imbrication de boîtes Vous pouvez utiliser une boîte pour gérer la mise en page et l’espacement des enfants de certains composants. Par exemple, imbriquez une boîte dans un composant [AccordionItem](https://docs.stripe.com/stripe-apps/components/accordion.md) pour ajouter des marges intérieures : ## CSS Custom Le composant `Box` prend en charge les [styles personnalisés](https://docs.stripe.com/stripe-apps/style.md#custom-styles). Cet exemple illustre l’utilisation de la propriété `boxShadow`. ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)