# 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

- Tag colors
- Tag sizes
- Variations

## Tag colors

Use different colors to emphasize or provide meaning.

    <ds-tag>medium</ds-tag>
    <ds-tag color="inverse">inverse</ds-tag>
    <ds-tag color="primary">primary</ds-tag>
    <ds-tag color="success">success</ds-tag>
    <ds-tag color="warning">warning</ds-tag>
    <ds-tag color="danger">danger</ds-tag>

## Tag sizes

Use different sizes to create hierarchy (defaults to `base`).

    <ds-tag size="small">small</ds-tag>
    <ds-tag size="base">base</ds-tag>
    <ds-tag size="large">large</ds-tag>

## Variations

Use a round tag to present small numbers.

    <ds-tag color="primary" round>7</ds-tag>
    <ds-tag color="primary" round>42</ds-tag>