mds components
mds:countdown
A live countdown to a deadline.
Rendered on the server first, then kept ticking by Alpine — so it is never blank before JS boots. These previews are live.
07
hours
42
min
00
sec
<mds:countdown :until="now()->addHours(7)->addMinutes(42)" :days="false" />With days and labels
The unit labels follow the config language — days / hours / min / sec here, روز / ساعت / دقیقه / ثانیه in Persian.
02
days
05
hours
00
min
00
sec
<mds:countdown :until="now()->addDays(2)->addHours(5)" labels size="lg" />Expired
Past the deadline it swaps to expired-text — "Expired" unless you pass your own.
This deal has ended
<mds:countdown :until="now()->subMinute()" expired-text="This deal has ended" />Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the digits, the unit labels (روز / ساعت / دقیقه / ثانیه) and the default expired text (به پایان رسید) to Persian; :fa="true" does it for a single countdown.
۰۲
روز
۰۵
ساعت
۰۰
دقیقه
۰۰
ثانیه
<mds:countdown :until="now()->addDays(2)->addHours(5)" labels size="lg" :fa="true" />Reference
mds:countdown
| Prop | Description |
|---|---|
| until | Deadline: a Carbon instance, a timestamp or a parseable string. |
| days | Shows a days segment. Default: true. |
| labels | Shows the unit labels under the digits. Default: false. |
| size | Options: sm, lg. |
| expired-text | Shown once the deadline passes. Default: "Expired", or به پایان رسید in Persian. |
| fa | Persian digits and built-in strings. Default: config('mds.persian_digits'). |