Documentation Index
Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The SeverityBadge component displays ESLint rule severity levels with appropriate icons and colors. Built on top of the Badge component with predefined configurations for each severity level.
Import
import { SeverityBadge } from "@aurelienbbn/gadget-ui/components";
Basic Usage
<SeverityBadge severity="error" />
Severity Levels
The component supports four severity levels:
Error
Warn
Suggestion
Off
<SeverityBadge severity="error" />
<SeverityBadge severity="warn" />
<SeverityBadge severity="suggestion" />
<SeverityBadge severity="off" />
Props
severity
'error' | 'warn' | 'suggestion' | 'off'
required
The severity level to display.
Additional CSS classes to apply.
Severity Configuration
Each severity level has a predefined configuration:
const SEVERITY_CONFIG = {
error: { icon: "⊗", label: "Error", variant: "destructive" },
warn: { icon: "⚠", label: "Warning", variant: "warning" },
suggestion: { icon: "◈", label: "Suggestion", variant: "accent" },
off: { icon: "○", label: "Off", variant: "default" },
};
Design Details
- Always uses the
sm size variant from Badge
- Icon is hidden from screen readers with
aria-hidden="true"
- Label text is accessible to screen readers
- Each severity has a distinct icon and color for quick recognition
Examples
In a Rule List
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<SeverityBadge severity="error" />
<span>no-unused-vars</span>
</div>
<div className="flex items-center gap-2">
<SeverityBadge severity="warn" />
<span>no-console</span>
</div>
<div className="flex items-center gap-2">
<SeverityBadge severity="off" />
<span>no-debugger</span>
</div>
</div>
With Custom Styling
<SeverityBadge severity="error" className="ml-2" />
All Severities
<div className="flex gap-2">
<SeverityBadge severity="error" />
<SeverityBadge severity="warn" />
<SeverityBadge severity="suggestion" />
<SeverityBadge severity="off" />
</div>
Type Exports
The component also exports the Severity type for use in TypeScript:
import { type Severity } from "@aurelienbbn/gadget-ui/components";
const ruleSeverity: Severity = "error";
Component Definition
Location: packages/gadget-ui/src/components/severity-badge.tsx:17