Overview
A countdown component is designed for dynamic visualization of the time remaining until a specific event or deadline. It serves as a real-time reminder, generating anticipation or urgency among users. This component is particularly useful in contexts where timing is crucial, such as sales, product launches, or event start times.
When to use
- To create a sense of urgency or anticipation for an upcoming event or deadline.
- To visually communicate the time remaining for time-sensitive actions or offers.
When not to use
- For displaying static dates or times not related to a countdown.
- As a replacement for a calendar or scheduling component.
Anatomy
- Countdown
- Days
- Hours
- Minutes
- Seconds
Variants & States
Appearance
Countdown has three distinct types of appearance - default, subtle, and transparent. Please choose the appropriate appearance for your countdown component based on the context and background of the section in which it is placed.
darkMode
Countdown has a different visual appearance if it is placed on a dark background. For cases where this is needed, we have the reversed property that needs to be applied.
Internationalization
For RTL (right-to-left) languages, the layout of the time units within the Countdown Component should be in reverse order.
Properties
| Name | Type | Values | Description |
|---|---|---|---|
| appearance | String | defaultsubtletransparent |
|
| darkMode | String | falsetrue |
Usage Guidelines
Content Guidelines
We use a Countdown component to display a diminishing timer for a specific event, such as a subscription expiry, an offer ending, or a new feature launch.
Voice and tone
- For offers or expiring trials, we’re urgent but supportive.
- For scheduled events, we’re informative and clear.
Copy
- We clearly state what the countdown is for.
- If it’s an offer, we highlight the benefit.
- We keep the introductory text brief.
- We use sentence case.
Accessibility
- Since the countdown value changes frequently, to prevent accessibility issues, the countdown shouldn’t announce every second — this creates a loop that overwhelms screen readers. Instead, it should announce the current time when the user focuses on it.
- We announce time units in full.
- We ensure the purpose of the countdown is clearly communicated with an associated, persistent label.
- When the countdown reaches zero, the final state and any subsequent action must be announced and displayed prominently.