Feedback & Status Components
Components for user feedback and status display: Alert, Badge, Toast, Toast Container, Banner, Progress, and Rating.
Alert
Notification messages with different types and optional dismissibility. Use alerts to communicate important information.
Information
This is an informational alert. Use it to provide helpful information to users.
Success!
Your changes have been saved successfully. This alert can be dismissed.
Warning
Please review your input before continuing. Some fields may need attention.
Error
An error occurred while processing your request. Please try again.
Without Title
A simple info message without a title.
Success message without icon.
View Code
<!-- Info Alert -->
<noundry-alert type="info" title="Information">
This is an informational alert.
</noundry-alert>
<!-- Success Alert (Dismissible) -->
<noundry-alert type="success" title="Success!" dismissible="true">
Your changes have been saved successfully.
</noundry-alert>
<!-- Warning Alert -->
<noundry-alert type="warning" title="Warning">
Please review your input before continuing.
</noundry-alert>
<!-- Error Alert -->
<noundry-alert type="error" title="Error">
An error occurred while processing your request.
</noundry-alert>
<!-- Without Icon -->
<noundry-alert type="success" show-icon="false">
Success message without icon.
</noundry-alert>Alert Properties
| Property | Type | Default | Description |
|---|---|---|---|
type | string | "info" | Alert type: info, success, warning, error |
title | string | null | Optional title |
dismissible | bool | false | Allow dismissal |
show-icon | bool | true | Show type icon |
css-class | string | null | Additional CSS classes |
Badge
Status indicators and labels. Use badges to highlight status, categories, or counts.
Variants
Default
Success
Warning
Error
Info
With Icons
Approved
Pending
Rejected
Sizes
Small
Medium
Large
Styles
Solid
Outline
Pill
Outline Pill
View Code
<!-- Basic Badges -->
<noundry-badge variant="success">Active</noundry-badge>
<noundry-badge variant="warning">Pending</noundry-badge>
<noundry-badge variant="error">Failed</noundry-badge>
<!-- With Icons -->
<noundry-badge variant="success" icon="check">Approved</noundry-badge>
<!-- Sizes -->
<noundry-badge variant="info" size="sm">Small</noundry-badge>
<noundry-badge variant="info" size="md">Medium</noundry-badge>
<noundry-badge variant="info" size="lg">Large</noundry-badge>
<!-- Styles -->
<noundry-badge variant="success" outline="true">Outline</noundry-badge>
<noundry-badge variant="success" pill="true">Pill</noundry-badge>Badge Properties
| Property | Type | Default | Description |
|---|---|---|---|
variant | string | "default" | Style: default, success, warning, error, info |
size | string | "md" | Size: sm, md, lg |
icon | string | null | Icon name |
outline | bool | false | Outlined style |
pill | bool | false | Rounded pill style |
Toast
Temporary notification popups. Use toasts for non-critical notifications that auto-dismiss.
Information
This is an informational message.
Success!
Your action was completed successfully.
Warning
Please review the changes before continuing.
Error
An error occurred. This toast won't auto-dismiss.
View Code
<noundry-toast type="success"
title="Saved!"
trigger-text="Show Toast"
position="top-right"
auto-dismiss="true"
delay="3000">
Your changes have been saved successfully.
</noundry-toast>
<noundry-toast type="error"
title="Error"
trigger-text="Show Error Toast"
position="top-right"
auto-dismiss="false">
An error occurred. This toast won't auto-dismiss.
</noundry-toast>Toast Properties
| Property | Type | Default | Description |
|---|---|---|---|
type | string | "info" | Toast type: info, success, warning, error |
title | string | null | Toast title |
trigger-text | string | "Show Toast" | Button text |
position | string | "top-right" | Position on screen |
dismissible | bool | true | Can be dismissed |
auto-dismiss | bool | true | Auto close |
delay | int | 5000 | Auto close delay (ms) |
Toast Container
Global toast notification system with JavaScript API. Add once to your layout and use the JavaScript API to show toasts from anywhere.
The Toast Container should be added to your layout once. Then you can use the JavaScript API to show toasts.
Note: Add <noundry-toast-container /> to your _Layout.cshtml to enable the global toast API.
View Code
<!-- Add once to your layout -->
<noundry-toast-container position="top-right" default-duration="4000" />
<!-- JavaScript API -->
<script>
// Show toasts from anywhere in your application
toast.success('Operation completed!');
toast.error('Something went wrong');
toast.info('New notification');
toast.warning('Please check your input');
toast.show('Custom message', 'info', 5000);
</script>Toast Container Properties
| Property | Type | Default | Description |
|---|---|---|---|
position | string | "top-right" | Container position |
max-width | string | "max-w-sm" | Maximum width |
default-duration | int | 3000 | Default toast duration (ms) |
enable-sound | bool | false | Enable notification sounds |
Banner
Dismissible notification banners. Use banners for site-wide announcements or important notices.
New Feature Available
Check out our new dashboard with improved analytics!
Scheduled Maintenance
System maintenance is scheduled for this weekend. Some features may be unavailable.
View Code
<noundry-banner type="info"
title="New Feature"
dismissible="true"
show-delay="1000">
Check out our new dashboard!
</noundry-banner>
<noundry-banner type="warning"
title="Maintenance"
dismissible="true">
Scheduled maintenance this weekend.
</noundry-banner>Banner Properties
| Property | Type | Default | Description |
|---|---|---|---|
type | string | "info" | Banner type |
title | string | null | Banner title |
dismissible | bool | true | Can be dismissed |
show-delay | int | 0 | Delay before showing (ms) |
Progress
Progress bars with animation. Show progress of operations, uploads, or completion status.
Basic Progress
With Percentage
Colors
Sizes
Striped & Animated
View Code
<!-- Basic -->
<noundry-progress value="75" />
<!-- With Percentage -->
<noundry-progress value="75" show-percentage="true" />
<!-- Colors -->
<noundry-progress value="75" color="green" />
<noundry-progress value="75" color="red" />
<!-- Sizes -->
<noundry-progress value="75" size="sm" />
<noundry-progress value="75" size="lg" />
<!-- Striped & Animated -->
<noundry-progress value="75"
striped="true"
animated="true" />Progress Properties
| Property | Type | Default | Description |
|---|---|---|---|
value | int | 0 | Progress value (0-100) |
max | int | 100 | Maximum value |
show-percentage | bool | false | Show percentage text |
color | string | "blue" | Progress bar color |
size | string | "md" | Bar height: sm, md, lg |
striped | bool | false | Striped pattern |
animated | bool | false | Animate stripes |
Rating
Interactive star rating system. Collect user ratings for products, services, or content.
Basic Rating
With Feedback Text
Custom Max Stars
Read-Only (Disabled)
With Reset Option
View Code
<!-- Basic Rating -->
<noundry-rating label="Rate this product"
value="3" />
<!-- With Model Binding -->
<noundry-rating asp-for="UserRating"
label="Rate this product"
max-stars="5"
show-feedback="true"
allow-reset="true" />
<!-- Read-Only -->
<noundry-rating label="Average Rating"
value="4"
disabled="true"
show-feedback="true" />Rating Properties
| Property | Type | Default | Description |
|---|---|---|---|
asp-for | ModelExpression | null | Model binding |
label | string | null | Rating label |
max-stars | int | 5 | Number of stars |
value | int | 0 | Initial value |
show-feedback | bool | false | Show rating text |
allow-reset | bool | true | Allow clearing rating |
disabled | bool | false | Disable interaction |