Searchable Dropdown
Searchable Dropdown
Custom Dropdown
This is text tooltip
This is custom html content tooltip
Custom
Html
content
Nitrozen Demo H1
Nitrozen Demo H2
Nitrozen Demo H3
Nitrozen Demo H4
Nitrozen Demo H5
Nitrozen Demo H6
V1 Buttons (nitrozen-button)
V1 Button Denotations
| Component: | <nitrozen-button> |
| Directives: | v-flat-btn (filled button), v-stroke-btn (outlined button) |
| Themes: | primary (default - green), secondary (blue/purple) |
| Sizes: | small (default - 39px), medium (48px), large (60px) |
| Props: | :rounded, :disabled, :showProgress, :focused, :icon, :href |
| Border Radius: | 250px (pill-shaped) |
Primary Theme - Flat Buttons
Sizes: Small (default), Medium, Large
States: Normal, Hover, Progress, Focused, Disabled
Primary Theme - Stroke Buttons
Sizes: Small (default), Medium, Large
States: Normal, Hover, Focused, Disabled
Primary Theme - Rounded Flat Buttons
Primary Theme - Rounded Stroke Buttons
Secondary Theme - Flat Buttons
Sizes: Small (default), Medium, Large
States: Normal, Hover, Progress, Focused, Disabled
Secondary Theme - Stroke Buttons
Sizes: Small (default), Medium, Large
States: Normal, Hover, Focused, Disabled
Secondary Theme - Rounded Flat Buttons
Secondary Theme - Rounded Stroke Buttons
Link Buttons (with href)
Icon Buttons
Button Groups
V2 Buttons (nitrozen-button-v2)
V2 Button Denotations
| Component: | <nitrozen-button-v2> |
| Themes: | primary (default - filled), secondary (outlined/stroke) |
| Appearances: | default (blue/purple), positive (green/success), negative (red/error), warning (orange/warning) |
| Sizes: | extra-small (24px), small (32px), medium (default - 40px), large (48px), extra-large (64px) |
| Props: | :rounded, :disabled, :showProgress, :focused, :icon, :href |
| Border Radius: | 250px (pill-shaped) |
Key Differences: V1 vs V2
- No directives needed: V2 doesn't require
v-flat-btnorv-stroke-btn - Appearance prop: V2 has semantic appearances (positive, negative, warning) for contextual actions
- More sizes: V2 has 5 sizes vs V1's 3 sizes
- Theme meaning: In V2,
secondarytheme creates outlined/stroke style (similar to V1'sv-stroke-btn) - Disabled styling: V2 uses opacity-based disabled state with specific colors per appearance
Default Appearance - Primary Theme
Sizes: Extra Small, Small, Medium (default), Large, Extra Large
States: Normal, Disabled
Default Appearance - Secondary Theme
Sizes: Extra Small, Small, Medium (default), Large, Extra Large
States: Normal, Disabled
Positive Appearance - Primary Theme
Sizes: Extra Small, Small, Medium (default), Large, Extra Large
Disabled State
Positive Appearance - Secondary Theme
Disabled State
Negative Appearance - Primary Theme
Sizes: Extra Small, Small, Medium (default), Large, Extra Large
Disabled State
Negative Appearance - Secondary Theme
Disabled State
Warning Appearance - Primary Theme
Sizes: Extra Small, Small, Medium (default), Large, Extra Large
Disabled State
Warning Appearance - Secondary Theme
Disabled State
Rounded Buttons - All Appearances
Default Appearance
All Appearances - Rounded
All Appearances - Rounded - Secondary Theme
Rounded - Disabled
Comparison Grid - All Combinations
Primary Theme - All Appearances x All Sizes
| Size / Appearance | Default | Positive | Negative | Warning |
|---|---|---|---|---|
| Extra Small | ||||
| Small | ||||
| Medium | ||||
| Large | ||||
| Extra Large |
Secondary Theme - All Appearances x All Sizes
| Size / Appearance | Default | Positive | Negative | Warning |
|---|---|---|---|---|
| Extra Small | ||||
| Small | ||||
| Medium | ||||
| Large | ||||
| Extra Large |
V1 vs V2 Side by Side Comparison
Quick Reference
V1 (nitrozen-button)
- Uses directives:
v-flat-btn,v-stroke-btn - 3 sizes: small, medium, large
- 2 themes: primary, secondary
V2 (nitrozen-button-v2)
- No directives needed
- 5 sizes: extra-small to extra-large
- 4 appearances: default, positive, negative, warning
- 2 themes: primary (filled), secondary (outlined)
Primary Buttons Comparison
V1 Flat Primary
V2 Default Primary
V1 Stroke Primary
V2 Default Secondary
Size Comparison
V1 Small
V1 Medium
V1 Large
V2 Extra Small
V2 Small
V2 Medium
V2 Large
V2 Extra Large
Disabled States Comparison
V1 Flat Disabled
V1 Stroke Disabled
V2 Primary Disabled
V2 Secondary Disabled
Rounded Buttons Comparison
V1 Rounded Flat
V1 Rounded Stroke
V2 Rounded Primary
V2 Rounded Secondary
Secondary
Tertiary
Primary
{{ slotProps.item }} {{ slotProps.selected }}