Photo slot

The photo slot is an interactive tile used on the workout finishing screen to let users attach photos to a completed workout. Each slot exists in one of two states: empty (inviting the user to add a photo) or filled (showing the added photo with an option to remove it). Slots are always arranged in a horizontal grid.

When to use

Use the photo slot on the workout finishing screen to let users document their session with photos.

Don't use a photo slot as a general media picker elsewhere in the app — use a dedicated upload component instead.

Variants

Property 1

Value	Description
`default`	Empty slot. Displays a dashed brand-colored border and an image icon, inviting the user to add a photo.
`filled`	A photo has been added. Displays the photo as a full cover image with a subtle dashed border.

Props

Prop	Values	Default	Description
`property1`	`default` / `filled`	`default`	Controls whether the slot is empty or contains a photo.
`editable`	`true` / `false`	`true`	When `false`, hides the action button. Used on view-only screens such as workout history.

Structure

Each photo slot is composed of:

Photo area — a rounded tile (radius responsive/layout/radius/xl) with a dashed border. In default, the background is broz-bg/interactive/middle/default; in filled, the photo covers the full area.
Action button — a circular pill (36×36px, radius responsive/layout/radius/rounded) anchored to the bottom-right corner of the tile, overlapping it. Visible only when editable=true.

Action button per variant

Variant	Background	Border	Icon	Action
`default`	`broz-bg/interactive/strong/default`	`broz-borders/interactive/stronger/default`	Plus / add	Opens the photo picker
`filled`	`broz-bg/neutral/light/default`	`broz-borders/neutral/light/default`	Trash / delete	Opens a confirmation modal before removing the photo

Sizes

Height is fixed at 128px. Width follows the grid layout.

Interaction

Tapping anywhere on a default slot opens the photo picker.
Tapping the action button on a default slot also opens the photo picker.
Tapping the action button on a filled slot opens a confirmation modal asking the user to confirm deletion before the photo is removed.
When editable=false, the slot is non-interactive. No button is shown and tapping the slot does nothing.

Placement

Photo slots are always placed in a horizontal grid on the workout finishing screen. They should not be used outside of this grid context or on non-finishing screens.

Tokens

Element	Token
Default slot background	`broz-bg/interactive/middle/default`
Default slot border	`broz-borders/selected`
Filled slot border	`broz-borders/stuble`
Photo area corner radius	`responsive/layout/radius/xl`
Add button background	`broz-bg/interactive/strong/default`
Add button border	`broz-borders/interactive/stronger/default`
Remove button background	`broz-bg/neutral/light/default`
Remove button border	`broz-borders/neutral/light/default`
Button corner radius	`responsive/layout/radius/rounded`
Add button shadow	`shadow/md`
Remove button shadow	`shadow/sm`
Image icon color	`broz-icons/interactive/tiertary`

‹ PR card

Finishing card ›

App preview

What we offer

About us

Contact

Design system

Download app