# Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

#

April 5, 2026
Less than 1 minute

On This Page

- Basic Modal

## Basic Modal

Basic modal usage

    <ds-modal style="position: absolute" />

    <template>
      <div>
        <ds-modal
          v-model="isOpen"
          title="Modal Title"
        >
          <p>Hello World</p>
        </ds-modal>
        <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            isOpen: false
          }
        }
      }
    </script>

Customize button labels

    <template>
      <div>
        <ds-modal
          v-if="isOpen"
          v-model="isOpen"
          title="Custom Button Labels"
          force
          extended
          confirm-label="All right"
          cancel-label="Please not"
        >
          <p>Culpa amet sunt aperiam ratione est sed. Molestiae minus doloremque libero. Beatae nam repellendus aliquid maxime.</p>
          <p>Sint quasi provident natus id earum debitis. Et facilis a iure ullam. Velit autem eveniet ea reprehenderit ducimus doloribus earum quo.</p>
          <p>Consequatur ratione repudiandae aliquid ea. Ut eum architecto assumenda. Autem eaque provident quia et.</p>
          <p>Eaque quia aut dolorum sunt ea consequuntur. Labore reprehenderit placeat pariatur molestiae sit laborum nostrum. Deserunt est commodi et suscipit tenetur ipsa voluptas cupiditate. Porro laborum quidem ut corrupti. Dolorum et est placeat qui.</p>
          <p>Adipisci beatae cumque esse harum. Error quis nulla illo nemo est. Enim est quis explicabo voluptatem. Omnis maxime qui similique consequatur voluptatibus. Est necessitatibus iure aliquid omnis eum. Ut voluptatibus vel error exercitationem temporibus qui expedita.</p>
        </ds-modal>
        <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            isOpen: false
          }
        }
      }
    </script>