# salla-count-down (https://docs.salla.dev/twilight/react/web-components/salla-count-down) {/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */} A countdown timer to a given date, showing days, hours, minutes and seconds that update every second. A theme would use it for offers, sales or pre-order deadlines. When the time is reached it shows an "offer ended" message (or `end-text`). With `pre-order` it shows the expected availability date and, if enabled, a countdown to the pre-order end date. An unparseable `date` shows a localized "invalid date" message. ## Use it [#use-it] In HTML or JSX, use the tag `` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase). ```tsx import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down'; ``` **Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see. ## Try it [#try-it] ## Example [#example] ```tsx import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down'; export function Example() { return ( ); } ``` ```html ``` ```tsx import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down'; export function Example() { return ( ); } ``` ```html ``` ## Properties [#properties] | Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | | `autoSegments` | `auto-segments` | If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0. Matches salla-timer behaviour. Off by default for backward compatibility. | `boolean` | `false` | | `boxColor` | `box-color` | Background color of each box when boxed is enabled. Accepts any valid CSS color value (e.g. '#1a3c34', 'var(--color-primary)') | `string` | | | `boxTheme` | `box-theme` | Theme color name to use as the box background when boxed is enabled. Maps to the corresponding CSS variable (e.g. 'primary' → var(--color-primary)). Available values: 'primary' \| 'primary-dark' \| 'primary-light' \| 'primary-reverse' \| 'main' Takes precedence over box-color when both are set. | `string` | | | `boxed` | `boxed` | When true, each number is shown in its own box. | `boolean` | | | `buttonHref` | `button-href` | The link the button points to. Used with `with-button` and `button-text`. | `string` | | | `buttonIcon` | `button-icon` | CSS class name(s) for an icon shown inside the button, for example `sicon-cart`. Used with `with-button`. | `string` | | | `buttonText` | `button-text` | The button label. Used with `with-button`; no button is rendered without it. | `string` | | | `color` | `color` | The color style of the countdown: `primary`, `light` or `dark`. Defaults to `dark`. | `"dark" \| "light" \| "primary"` | `'dark'` | | `date` | `date` | The date to count down to. Supported formats: Parsed as KSA time (UTC+3): - "YYYY-MM-DD HH:mm:ss" (e.g. "2023-05-22 16:37:52") - "YYYY-M-D HH:mm:ss" (e.g. "2023-5-22 16:37:52") unpadded month/day accepted - "YYYY-MM-DD" (e.g. "2023-05-22") counts down to 23:59:59 of that day - "YYYY-M-D" (e.g. "2026-5-15", "2026-05-5") unpadded month/day accepted - "MM-DD-YYYY" (e.g. "04-28-2026") counts down to 23:59:59 of that day - "MM-DD-YYYY,HH:mm:ss am/pm" (e.g. "12-23-2026,03:23:00 pm") Parsed as browser local time: - "YYYY/MM/DD HH:mm:ss" (e.g. "2023/05/22 16:37:52") - "YYYY/MM/DD" (e.g. "2023/05/22") counts down to 23:59:59 of that day - "MM/DD/YYYY HH:mm:ss" (e.g. "05/22/2023 16:37:52") - "MM/DD/YYYY" (e.g. "05/22/2023") counts down to 23:59:59 of that day | `string` | | | `digits` | `digits` | Digit style: `en` always uses Latin digits, `auto` follows the page language. Defaults to `auto`. | `"auto" \| "en"` | `'auto'` | | `endOfDay` | `end-of-day` | When true, counts down to 23:59:59 of the day in `date`, ignoring any time part. | `boolean` | | | `endText` | `end-text` | The text shown when the countdown ends. When empty, a localized "offer ended" message is used. | `string` | | | `horizontal` | `horizontal` | When true, applies a compact horizontal layout. | `boolean` | | | `labeled` | `labeled` | When true, shows a unit label (days, hours, minutes, seconds) under each number. | `boolean` | | | `listPadding` | `list-padding` | Horizontal padding applied to the list (e.g. '20px', '1rem', '5%'). Defaults to no padding. | `string` | | | `preOrder` | `pre-order` | Pre-order settings, as an object or a JSON string, with the shape `{ "activate_countdown": boolean, "availability_date"?: string, "end_date"?: string }`. `availability_date` is shown as "expected to be available on" in the page locale. `end_date` is the date the countdown runs to and replaces `date`. The countdown itself only appears when `activate_countdown` is true. Dates use the same formats as `date`, or a form such as `Jan 2, 2023 16:37:52`. Invalid JSON is ignored. | `PreOrder \| string` | | | `prefixText` | `prefix-text` | Text shown before the countdown, for example "Offer ends in". | `string` | | | `size` | `size` | The size of the countdown: `sm`, `md` or `lg`. Defaults to `md`. | `"lg" \| "md" \| "sm"` | `'md'` | | `withButton` | `with-button` | When true, renders an action button next to the countdown. The button only appears if `button-text` is also set. | `boolean` | | ## Methods [#methods] Call these on the element or a React ref. ### `endCountDown() => Promise` [#endcountdown--promisevoid] Stops the countdown immediately, shows the ended state and sets all numbers to zero. Resolves with no value. ## Related [#related] Renders: [``](https://docs.salla.dev/twilight/react/web-components/salla-button). Used inside: [``](https://docs.salla.dev/twilight/react/web-components/salla-basket-gap), [``](https://docs.salla.dev/twilight/react/web-components/salla-edit-order-button), [``](https://docs.salla.dev/twilight/react/web-components/salla-order-edit), [``](https://docs.salla.dev/twilight/react/web-components/salla-product-card).