Components
Period filters
Period filters
Segmented control that scopes a list or dashboard to a time range. Defaults to
30d — a useful window without overwhelming.
Canonical
Four pills (7d / 30d / 3m / 12m). The active pill is a "thumb" that slides between positions on click; the URL gets ?period=… and the target swaps via Alpine-AJAX.
Variants
3 variants
7d
30d
3m
12m
Standard
Q1
Q2
Q3
Q4
Financial year
1h
24h
7d
Recent
States
2 states
7d
30d
3m
12m
Idle (default)
7d
30d
3m
12m
Hover (30d)
Props
3 attributes| Attribute | Values | Notes |
|---|---|---|
| model.ActivePeriod | 7d, 30d, 3m, 12m | Token shown highlighted; default 30d. |
| model.BaseUrl | Razor route | URL the pills GET to with ?period=…. |
| model.TargetId | string | Alpine-AJAX x-target.push id. Default home. |
Do & don't
7d
30d
3m
12m
Do
Default to 30d. Persist the selection in the URL
?period=… so refresh and shared links keep it.
7d
30d
3m
All
Don't
Don't default to "All". The page does a full-history query on every first paint — slow on day one, much slower a year in.