Skip to main content
Pajamas Design System
Pajamas Design System

Main navigation

  • Brand
    • Introduction
      • Brand voice
      • Style and formatting
      • Core logo
      • Logomark
      • Branded lockups
      • Color
      • Typography
        • Core elements
        • Icons and Patterns
        • Illustrations
        • Diagrams
      • Motion
      • Photography
    • Style guides
    • Resources
  • Product
      • Philosophy
      • Principles
      • Navigating Pajamas
      • Contributing
      • Contribution lifecycle
        • Contributing
        • File structure
        • Release notes
        • Release process
        • Components
        • Libraries
        • Annotation
        • Sharing
        • Breaking changes
      • Resources
      • Glossary
      • Repository
        • Overview
        • Authoring guide
        • Reading guide
        • Usage guide
        • All design tokens
      • Color
        • Fundamentals
        • Headings
        • Markdown
      • Spacing
      • Layout
      • Border
      • Elevation
        • Fundamentals
        • Feedback
        • Fundamentals
        • Animated icons
        • All icons
        • Fundamentals
        • Creating
        • Exporting
        • All illustrations
      • Tailwind utilities
      • Accordion
      • Alert
      • Attribute list
        • Avatar
        • Avatar group
      • Badge
      • ⚠️ Banner
      • Breadcrumb
      • Broadcast message
        • Button
        • Button group
        • Sorting
      • Card
      • Collapse
      • Dashboard panel
      • Drawer
        • Overview
        • Disclosure
        • Combobox
        • Character count
        • Checkbox
        • Date picker
        • Filter
        • Form combobox
        • Form fields
        • Form group
        • Form input group
        • Multi-step form template
        • Radio button
        • Search
        • Select
        • Textarea
        • Text input
        • Token
      • Infinite scroll
      • Label
      • Link
      • Modal
      • Pagination
      • Path
      • Popover
      • Progress bar
      • Skeleton loader
      • Socks
      • Spinner
      • Stepper
      • Table
      • Tabs
      • Toast
      • Toggle
      • Tooltip
      • Tree
        • Animated Number
        • Friendly Wrap
        • Intersection Observer
        • Intersperse
        • Sprintf
        • Truncate
        • Truncate Text
      • Hover Load
      • Outside
      • Resize Observer
      • Safe HTML
      • Safe Link
      • Affordance
      • Contextual help and info
      • Dashboards
      • Destructive actions
      • Drag and drop
      • Embedded lists
      • Empty States
      • Feature discovery
      • Feature management
      • Filtering
      • Forms
        • AI-human interaction
        • Agents and Flows
        • Calls to action
        • GitLab Duo Chat Interface
        • Feedback
        • Slash commands in GitLab Duo Chat
      • Keyboard shortcuts
      • Loading
      • Merge request reports
      • Navigation sidebar
      • Notifications
      • Obfuscation
      • Progressive disclosure
      • Saving and feedback
      • Searching
      • Settings management
      • Overview
      • Job
      • Merge request
      • Overview
      • Color
      • Charts
      • Single stat
      • Mini pipeline graph
      • UI text
      • Verb tenses
      • Punctuation
      • Date and time
      • Statement of compliance
      • Inclusive design principles
      • Best practices
      • GitLab accessibility conformance report
        • Overview
        • Visual
        • Content and semantics
        • Keyboard-only
        • Focus management
        • Screen readers

Directives

Directives are reusable Vue.js instructions that extend HTML elements with custom behavior. They provide common functionality like detecting clicks outside elements, preloading resources on hover, or sanitizing HTML content.

  • Hover Load A Vue Directive to help with preloading resources when hovering over an element.
  • Outside A Vue Directive to call a callback when a supported event type occurs outside of the element the directive is bound to.
  • Resize Observer A Vue Directive to get notified whenever a given element's size changes.
  • Safe HTML A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
  • Safe Link A Vue directive to make the hyperlinks secure by default.
  • Page source
  • Open in Web IDE
  • Contribute
  • Privacy statement