---
url: /documentation/user-interface/components/disclaimer.md
---

# Disclaimer

The `Disclaimer` component displays a modal disclaimer that users must accept before using the application. It is designed to be used within the `FirstRunOrchestrator` component, which manages when to show the disclaimer based on cookie state, runtime configuration, and the priority of other first-run flows (changelogs, onboarding).

## Features

* **Modal Display**: Full-screen modal that blocks app access until accepted
* **HTML Content Support**: Rich text formatting with custom HTML
* **Customizable Confirmation**: Configurable acceptance checkbox and text
* **Accessibility**: Keyboard accessible with proper focus management
* **Responsive Design**: Works seamlessly on all device sizes
* **Event-Driven**: Emits a `finished` event when the user accepts, allowing the parent (e.g., `FirstRunOrchestrator`) to manage completion state
* **Runtime Configuration**: Version, app name, and disabling are configurable via runtime config

## Props

| Prop                | Type     | Required | Description                                                           |
| ------------------- | -------- | -------- | --------------------------------------------------------------------- |
| `appName`           | `string` | Yes      | The name of your application, will be used for the default `contentHtml` and `confirmationText` when these props are not set.                                          |
| `confirmationText`  | `string` | No       | Text users must confirm by checking the box. When not set, the translation key `disclaimer.confirmation_text` will be used with `{appName}` as a placeholder.                           |
| `contentHtml`       | `string` | No       | Main HTML content for the disclaimer body. When not set, the translation key `disclaimer.content` will be used.                             |
| `postfixHtml`       | `string` | No       | HTML content displayed after main content (e.g., contact info)        |

## Events

| Event      | Payload                     | Description                                                                                          |
| ---------- | --------------------------- | --------------------------------------------------------------------------------------------------- |
| `finished` | `{ completed: boolean }`    | Emitted when the user checks the confirmation checkbox. The orchestrator listens for this event to set the completion cookie and unmount the component. |

## Configuration

The Disclaimer is configured through Nuxt's runtime config and can be disabled entirely or have its defaults set without passing props. This is useful for environments where the disclaimer is not needed (e.g., internal tools, testing).

### Runtime Config

Set the `disclaimer` options and `disableDisclaimer` flag in your `nuxt.config.ts`:

```typescript
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      commonUi: {
        disableDisclaimer: false,
        disclaimer: {
          appName: "My App",
          version: "1.0.0",
        },
      },
    },
  },
});
```

| Option                        | Type                 | Default     | Description                                                                 |
| ----------------------------- | -------------------- | ----------- | --------------------------------------------------------------------------- |
| `disableDisclaimer`           | `boolean` | `string` | `false`     | When `true` (or `"true"`), the disclaimer flow is skipped entirely by the orchestrator. |
| `disclaimer.appName`          | `string`             | `""`        | Default application name passed to the Disclaimer component.               |
| `disclaimer.version`          | `string`             | `"1.0.0"`   | Version identifier — changing this re-shows the disclaimer to all users.    |

::: tip
You can also set `disableDisclaimer` to the string `"true"` (e.g., via environment variables) and it will be treated the same as the boolean `true`.
:::

## Usage

### With FirstRunOrchestrator (Recommended)

The `Disclaimer` component is designed to be orchestrated by `FirstRunOrchestrator`, which manages the sequencing of first-run flows (disclaimer → changelogs → onboarding) and handles completion state via cookies. Place the orchestrator once in `app.vue` so it is available on every page:

```vue
<script lang="ts" setup>
const builder = useOnboardingBuilder()
    .addPhases<"Phase1">([
        {
            name: "Phase1",
            onEnter: async () => {},
            onExit: async () => {},
        },
    ])
    .switchPhase("Phase1")
    .addSteps([
        { popover: { title: "Step 1", description: "This is step 1" } },
    ]);
</script>

<template>
    <UApp>
        <FirstRunOrchestrator
            :onboarding-builder="builder"
            :disclaimer="{
                appName: 'Test App',
                confirmationText:
                    'I have read and understood the instructions and confirm that I will use Test App exclusively in compliance with the stated guidelines.',
            }"
        />
        <NuxtPage />
    </UApp>
</template>
```

The `disclaimer` prop on `FirstRunOrchestrator` provides overrides for the runtime config defaults. The orchestrator compares the `disclaimer-accepted` cookie against the configured version to determine whether the disclaimer should be shown.

### Using Default Translations

If `confirmationText` and `contentHtml` are not provided, the component will automatically use the translation keys from your i18n configuration:

```vue
<template>
    <!-- Uses translations: disclaimer.confirmation_text and disclaimer.content -->
    <Disclaimer app-name="My Application" />
</template>
```

The default translations used are:

* **`disclaimer.confirmation_text`**: Contains the confirmation text with `{appName}` as a placeholder
* **`disclaimer.content`**: Contains the full HTML disclaimer content

You can customize these translations in your application's i18n files (e.g., `locales/en.json`, `locales/de.json`). See the [Internationalization section](../#internationalization) for the default translation keys.

## Interactive Example

Customize the disclaimer content and see changes in real-time, try to leave properties empty to see default behavior:

Confirmation Text: