Elements
Core UI element components styled with the Ontopix theme — buttons, badges, alerts, cards, and more.
Core building blocks of the Ontopix UI. These components inherit theme defaults from app.config.ts and color mode tokens from ontopix.css.
Button
The primary interaction element. Supports multiple variants, colors, and sizes.
Variants
Colors
Sizes
| Variant | Description |
|---|---|
solid | Filled background, high emphasis |
outline | Bordered, medium emphasis |
soft | Tinted background, subtle emphasis |
ghost | No background, minimal emphasis |
link | Text-only, inline style |
Badge
Small labels for status indicators, counts, and categories.
Variants
Colors
Alert
Dismissible notification boxes for user feedback.
| Variant | Use Case |
|---|---|
solid | Critical notifications requiring immediate attention |
outline | Important but non-urgent information |
soft | Success confirmations and positive feedback |
subtle | Contextual hints and supplementary information |
Card
Content containers with multiple visual treatments.
Outline Card
Standard card with border for distinct content separation.
Soft Card
Tinted background card for grouped content areas.
Subtle Card
Minimal card for inline content grouping.
Avatar
User profile images with fallback support.
Separator
Visual dividers between content sections.
Progress
Progress indicators with color and size options.