--- title: "Play | GoodBarber's Design System" description: "The Play element signals playable media in GoodBarber apps: a play icon centered over the thumbnail, on its own background, in one of four fixed sizes." canonical_url: "https://www.goodbarber.com/uxdesign/play/" lang: fr --- # Play | GoodBarber's Design System [Design System](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://fr.goodbarber.com/uxdesign/](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://fr.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Play UI Elements The Play is the icon that signals playable media, centered over the thumbnail of a video or a podcast. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/play.6b743764339b.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/play.6b743764339b.mp4) ## Introduction The Play is a visual icon used to indicate playable media, such as videos and podcasts. It appears overlaid on the [thumbnail](/uxdesign/thumbnail/) of a piece of content, to clearly signal that the content can be played. It is a marker, not a control: it tells users that something is playable, and the content itself handles the playback. ## Anatomy ### The icon and its background The Play is a play [icon](/uxdesign/icons/) centered on a [background](/uxdesign/background/). Between the two, a padding keeps the icon off the edge. Size, padding and icon go together: the padding is what takes the icon from its own size up to the size of the Play. ![The icon, its background, and the padding between them](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Anatomy-Structure.05eec7eee398.png) *The icon, its background, and the padding between them* ## Properties ### Sizes The Play comes in four fixed sizes, and each one carries its own padding and its own icon size. | Size | 64 px | 56 px | 40 px | 32 px | | ---- | ----- | ----- | ----- | ----- | | Icon | 32 px | 30 px | 24 px | 20 px | The default is 56 px. The largest one suits immersive layouts, the smallest one compact lists, and each template picks the size that fits its own layout. Whichever size is chosen, the Play keeps it across devices, so that it stays a recognizable interaction point from one screen size to the next. ![The four sizes, at actual size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Properties-Sizes.b65cc8eed807.png) *The four sizes, at actual size* ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the background, from Sharp to Round. Because it is a square, Round makes it a full circle. ![Sharp, Rounded and Round applied to the background](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Properties-Shape.36db1c044490.png) *Sharp, Rounded and Round applied to the background* ### Color The color of the icon and the color of its background can both be customized: a white icon on a colored background, or a colored icon on a light one. The [Color](/uxdesign/atom-color/) atom drives both. ![A white icon on a colored background, and a colored icon on a light one](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Properties-Colors.bb4d29836965.png) *A white icon on a colored background, and a colored icon on a light one* ### Background By default, the background is not a flat color. It is a [Background](/uxdesign/background/) set to black at 50% opacity, with a [blur](/uxdesign/atom-blur/) effect: the image keeps showing through it, out of focus, and the white icon stays readable whatever the picture underneath. ![Black at 50% with a blur: what is underneath shows through, out of focus](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Properties-Background.11ba339d7419.png) *Black at 50% with a blur: what is underneath shows through, out of focus* ## Layout ### Placement The Play is placed in the middle zone of the media, always centered horizontally and vertically over the image. ![The Play centered in the media, both ways](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Layout-Placement.bfbf31b81377.png) *The Play centered in the media, both ways* ## Behavior ### When space runs short In a 16:9 ratio, the vertical space can become too tight for the Play and the [duration](/uxdesign/duration/) to coexist, and the two would overlap. In that case the Play takes priority, and the duration is hidden. ![In 16:9, the Play takes priority and the duration is hidden](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Play-Behavior-Overlap.64c4035f4933.png) *In 16:9, the Play takes priority and the duration is hidden*