> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.

# Activity UI

> CSS classes and built-in elements for building activity UIs that match the uploader theme.

The uploader exposes a set of stable CSS class names you can use when building activity UIs. They automatically inherit the active theme, color scheme, and design tokens — including dark mode and custom CSS variables.

These classes are only effective inside the uploader's DOM subtree.

## Layout

| Class                    | Element | Description                                                                                                                                        |
| ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.uc-ui-activity-header` | `div`   | Top header bar. Expects three direct children: a back button, a center `div` (icon + title), and a close button.                                   |
| `.uc-ui-toolbar`         | `div`   | A flex row for grouping action buttons. Applies consistent padding and gap. Use at the top (search bar) or bottom (action buttons) of an activity. |
| `.uc-ui-toolbar-spacer`  | `div`   | Flex spacer inside `.uc-ui-toolbar`. Pushes subsequent items to the end of the row.                                                                |

## Modal height

When an activity is shown in the modal, the dialog is sized to your content by default. Write CSS against your own activity element to opt into a different sizing.

**Fill the modal (full modal height)**

Use this when your activity needs the full available space (image editor, camera preview, scrollable grid). Declare two rules in your activity's stylesheet:

```css
/* Make the modal dialog fill the max available space */
[uc-modal] > dialog:has([activity="my-activity-id"][active]) {
  width: 100%;
  height: 100%;
}

/* Make your activity element fill the dialog */
my-activity-element {
  display: flex;
  flex-direction: column;
  height: 100%;
}
```

The `:has()` selector scopes the full-height rule to dialogs that actually contain your element, so other activities are unaffected.

**Self-sized (fixed or viewport-relative height)**

Use this when you want a specific height regardless of content:

```css
my-activity-element {
  display: flex;
  flex-direction: column;
  height: 80dvh;
}
```

The dialog's `max-height` still caps the visible size on smaller screens.

**Content-sized (default)**

Do nothing. Your activity element is a normal block/flex element, and the dialog wraps its natural height: suitable for short forms like a URL input.

## Buttons

| Class                  | Element  | Description                                                           |
| ---------------------- | -------- | --------------------------------------------------------------------- |
| `.uc-ui-primary-btn`   | `button` | Primary action button (filled, accent color).                         |
| `.uc-ui-secondary-btn` | `button` | Secondary action button (muted background).                           |
| `.uc-ui-icon-btn`      | `button` | Square icon-only button with no background (used for Back and Close). |

## Built-in elements

You can also use the following custom elements directly in your activity markup:

| Element              | Description                                                                                                                                                                                                                          |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `<uc-icon name="…">` | Renders a built-in SVG icon by name. Built-in names include `back`, `close`, `add`, `upload`, and more. Plugin-registered icons (via [`registerIcon`](/docs/file-uploader/plugins/assets/#registericon)) are also available by name. |

For the Back button, use [`uploaderApi.historyBack()`](/docs/file-uploader/api/#history-back) to navigate to the previous activity. For the Close button, call `uploaderApi.setModalState(false)`.

## Example

```html
<!-- Activity header -->
<div class="uc-ui-activity-header">
  <button type="button" class="uc-ui-icon-btn" title="Back" aria-label="Back">
    <uc-icon name="back"></uc-icon>
  </button>
  <div>
    <uc-icon name="my-icon"></uc-icon>
    <span>My Source</span>
  </div>
  <button type="button" class="uc-ui-icon-btn" title="Close" aria-label="Close">
    <uc-icon name="close"></uc-icon>
  </button>
</div>

<!-- Search toolbar -->
<div class="uc-ui-toolbar">
  <input type="text" placeholder="Search…" />
  <button type="button" class="uc-ui-primary-btn">Search</button>
</div>

<!-- Scrollable content area -->
<div class="my-results">…</div>

<!-- Bottom toolbar -->
<div class="uc-ui-toolbar">
  <div class="uc-ui-toolbar-spacer"></div>
  <button type="button" class="uc-ui-secondary-btn">Done</button>
</div>
```