Zum Hauptinhalt springen
Leichte Sprache Gebärdensprache| KERN Katalog KERN Figma KERN openCode

GitLabLabelStyle Component Demo

This page demonstrates the GitLabLabelStyle component that displays GitLab labels with proper styling and colors.

API Implementation​

This component uses the official GitBeaker library with the ProjectLabels.all() method:

// Uses GitLab API: GET /projects/:id/labels?search=:labelName
await gitlab.ProjectLabels.all(projectId, { search: labelName });

The component performs exact name matching to ensure the correct label is displayed.

Basic Usage​

The component can be used inline within text to display GitLab labels with their original colors and styling.

Here's an example of a scoped label: Loading...

Here's an example of a label: Loading...

Here's an example of a label: Loading...

Error Handling​

When a label doesn't exist, the component shows an error state:

Loading...

Docs

Component Props​

The component accepts the following props:

  • gitlabUrl (string, required): GitLab instance URL (fallback only — reads go through the GitLab proxy)
  • projectId (string | number, required): GitLab project ID or path
  • labelName (string, required): Exact name of the label to display

apiToken is deprecated and ignored. Labels are read through the anonymous, read-only GitLab proxy of the KERN chatbot backend, so no GitLab API token is shipped to the browser.

Features​

  • ✅ Proper GitLab styling: Labels display with their original colors from GitLab
  • ✅ Scoped label support: Handles labels with :: separator correctly
  • ✅ Tooltips: Hover over labels to see their descriptions
  • ✅ Inline usage: Perfect for use within paragraphs and documentation
  • ✅ Error handling: Shows error states for missing labels
  • ✅ Loading states: Displays loading indicator while fetching data
  • ✅ No client-side secrets: Reads through the KERN chatbot's anonymous GitLab proxy

Code Examples​

Basic Scoped Label​

<GitLabLabelStyle
	gitlabUrl="https://gitlab.opencode.de"
	projectId="kern-ux/pattern-library"
	labelName="Issue::Epic"
/>

Regular Label​

<GitLabLabelStyle
	gitlabUrl="https://gitlab.opencode.de"
	projectId="kern-ux/pattern-library"
	labelName="Produckt-Backlog"
/>

Tips​

  • Hover over labels to see their descriptions in tooltips
  • Use meaningful label names that exist in your GitLab project
  • Set up environment variables for secure API token management
  • Test with different label types to see how scoped vs regular labels are displayed

💡 Note: This component requires a valid GitLab API token and access to the specified project to display labels correctly.

Inhaltsverzeichnis