Unique Component

The Unique component provides a standardized way to indicate unique elements throughout the ISBDM documentation. It displays a numbered indicator with consistent styling.

Basic Usage

1 Title

<Unique /> Title

Custom Symbol

U Unique identifier

<Unique symbol="U" /> Unique identifier

Custom Tooltip

1 Unique element

<Unique tooltipText="This field must be unique" /> Unique element

Props

Prop	Type	Required	Default	Description
symbol	string	No	"1"	Symbol to display as indicator
tooltipText	string	No	"Unique"	Text for the tooltip and screen readers
className	string	No	-	Additional CSS class name

Accessibility Features

The Unique component is built with WCAG 2.1/2.2 Level AA compliance in mind:

• Proper title attribute for tooltip information
• ARIA label for screen readers
• Sufficient color contrast (>4.5:1) with the background
• Visual distinction through both color and border

Usage Guidelines

1. Consistent Placement: Place the Unique component before the element name or label it applies to.

2. Appropriate Context: Use for elements that must be unique within a specific context (e.g., unique identifiers, primary keys).

3. Use with Form Labels: When used with form fields, ensure it's associated with the field label.

4. Differentiate from Required: The Unique component (outlined in red) is visually distinct from the Mandatory component (solid red) to help users understand the difference.

Internationalization

The component can be adapted for internationalization:

• The tooltipText prop can be wrapped in a translation function
• Symbol can be changed if needed for different locales

Examples with Code

Basic Usage

<Unique /> Identifier

All Custom Props

<Unique 
  symbol="U" 
  tooltipText="Must be unique"
  className="highlight"
/> Identifier

Migration from HTML

The Unique component replaces the following HTML structure:

<span class="unique">1</span>

When migrating content, use the following mapping:

HTML Element/Attribute	Component Prop
span content	symbol
Additional classes	className

Additionally, the new component adds tooltip functionality not present in the original HTML.