Skip to content

DisclaimerButton

The DisclaimerButton component provides a button that allows users to view the disclaimer again after they have already accepted it. This is useful for applications that require users to review terms and conditions or usage guidelines at any time.

Preview

Info: This button allows users to view the disclaimer again after accepting it. The button triggers the same disclaimer modal shown on first visit.

Outline Variant:
Ghost Variant:

Props

PropTypeRequiredDefaultDescription
variantstringNo"outline"Button variant style. Options: "outline", "ghost"

Usage

Basic Implementation

Simply add the button wherever you want users to be able to review the disclaimer:

vue
<template>
  <div>
    <DisclaimerButton />
  </div>
</template>

With Custom Variant

Choose a different button style variant:

vue
<template>
  <div>
    <!-- Ghost variant (minimal styling) -->
    <DisclaimerButton variant="ghost" />
    
    <!-- Outline variant (default) -->
    <DisclaimerButton variant="outline" />
  </div>
</template>

In Navigation Bar

Commonly placed in the navigation bar for easy access (ghost variant is commonly used in navigation):

vue
<template>
  <NavigationBar>
    <template #right>
      <DisclaimerButton variant="ghost" />
    </template>
  </NavigationBar>
</template>

Developed with ❤️ by the DCC. Documentation released under the MIT License.