Standard Components

Weather

Built

Displays current weather conditions and a multi-day forecast for the record's address. Shows temperature, wind speed, humidity, visibility, atmospheric pressure, and weather alerts. Helps field workers and dispatchers plan around weather conditions at job sites.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Helping field workers prepare for weather conditions at upcoming job sites.
  • +Enabling dispatchers to factor weather into scheduling and resource allocation decisions.
  • +Providing at-a-glance weather context on job or activity records with a known address.

When not to use

  • −Records without address data — the component requires a geocodable address to fetch weather.
  • −Indoor-only job types where outdoor weather conditions are irrelevant to the work.
  • −When real-time weather precision is critical — data is cached and may be up to 30 minutes old.

Breeze UI Adherence

68
Breeze UI Adherence
Good
68% of styling uses Breeze UI tokens

Tokens Used

color4 tokens
color.border.default
Card border, section dividers
border-color
color.background.surface
Card background
background-color
color.text.default
Card header title, current temperature
color
color.text.subtle
Address text, weather description, detail labels, low temps
color
spacing1 token
spacing.5
Header horizontal padding (20px)
padding-inline
sizing1 token
spacing.3.5
Header height (56px / 3.5rem)
height
typography2 tokens
font.size.sm
Header title, detail values, weather description (14px)
font-size
font.weight.semibold
Header title, forecast high temps (600)
font-weight
radius1 token
radius.lg
Card corner radius (8px)
border-radius
shadow1 token
shadow.sm
Card elevation shadow
box-shadow

Custom CSS — not covered by Breeze UI

⚠Current temperature
text-4xl font-bold

Large temperature display requires a size significantly larger than any Breeze UI heading token. Custom sizing ensures the temperature is the dominant visual element.

⚠Weather icons
Weather icon SVGs (sun, cloud, partial cloud, rain)

Breeze UI does not include weather-specific iconography. Custom inline SVGs are used for weather condition icons in both current conditions and forecast strip.

⚠Condition detail grid
grid-cols-2 gap-3 (detail grid)

The 2x2 weather details grid uses a custom grid layout not covered by Breeze UI card patterns. Required to display four metrics compactly beside the temperature.

⚠Alert banner
bg-gradient-to-r from-orange-50 to-orange-100, orange-600 text

Alert banner uses a custom orange gradient background with severity-based color theming. Breeze UI does not provide alert banner gradient tokens.

⚠Forecast strip
overflow-x-auto scroll-snap-x (forecast strip)

Horizontally scrollable forecast strip with snap points for each day column. Breeze UI does not provide scroll-snap layout patterns.

⚠Temperature unit toggle
rounded-full px-2 py-0.5 (unit toggle pill)

Small pill-shaped toggle buttons for C°/F° switching. Breeze UI toggle components are full-sized and do not support this compact inline pill pattern.

Widths
1/2Fulldefault
Object Pages
JobsActivities

Settings

addressFieldtext*

The object field containing the address to fetch weather data for.

Default: Address
temperatureUnitselect

Default temperature unit. Users can toggle between units via the header control.

Default: celsius
celsiusfahrenheit
forecastDaysnumber

Number of days to show in the forecast strip. Range 3–14.

Default: 10
showAlertsboolean

Display active weather alerts (fire danger, storm warnings, etc.) when available from the weather service.

Default: true
showDetailsboolean

Show extended weather details (wind, humidity, visibility, pressure) alongside the current temperature.

Default: true

Attributes

currentWeatherWeatherData

Current weather conditions including temperature, description, icon code, wind speed, humidity, visibility, and pressure.

{ temp: number, description: string, icon: string, wind: number, humidity: number, visibility: number, pressure: number }
forecastForecastDay[]

Array of daily forecast entries with high/low temperatures, weather icons, and day labels.

alertsWeatherAlert[]

Active weather alerts for the location. Each alert has a severity level, title, and description.

addressstring

The resolved address string displayed in the header.

Changelog

2026-03-01v1.0

Initial component specification created.

2026-03-06v1.1

Added Breeze UI token mapping and adherence tracking. Defined alert banner severity color schemes. Added temperature unit toggle specification.