Components
The Tellus UI Kit. Each component page covers anatomy, properties, variants, and the tokens every part uses — with previews rendered live from the token spine, so they stay honest as tokens change.
Actions
ButtonThe primary call to action. variant sets the emphasis (primary is a solid brand fill, secondary is a tinted fill, tertiary is quiet), isOnMedia swaps in a translucent glass fill for use over photos or dark surfaces, and isDestructive recolors the button for a dangerous action.
Button.PillCompact fully rounded action button with an optional leading and trailing icon around a required label. Shares the variant and state matrix of Button (primary, secondary, blurred across default, pressed, disabled) but uses the sm size at 28pt height and the pill radius for inline actions where vertical space is tight.
Button.IconIcon-only button, the most compact form in the button family, with a square or circular container that shares the same variant and state matrix as Button.
ButtonDockA fixed bottom-of-screen action tray that stacks a primary button above a pair of secondary buttons, with an optional top-content slot and a home-indicator bar. The two boolean axes control whether the top-content slot region and the home-indicator are rendered.
ButtonGroupA stacked or side-by-side arrangement of one primary button and up to two secondary buttons. The orientation prop switches between horizontal (equal-width columns) and vertical (full-width stacked) layouts.
Button.LinkAn inline text-link button with optional leading and trailing icon slots. No background or border. Renders in the accent content color across two sizes (md, sm) and three interaction states (default, pressed, disabled).
ChipA compact, tappable pill for filters and single choices. isSelected toggles between a solid brand fill (selected) and a subtle secondary fill (unselected); state adds the pressed and disabled treatments. Optional leading and trailing icons sit inline with the label.
Chip.GroupA horizontal row of Chips for filters or single choices, spaced by the group gap token. The hasWrap property switches between a single scrollable line and wrapping onto additional lines when the chips overflow.
Feedback
BadgeCompact status or category pill. Two axes: variant sets the emphasis (primary is a subtle tinted fill, secondary and tertiary are transparent), and intent sets the semantic color family. Every intent uses colored text.
StepperVertical process tracker that stacks step rows, each pairing a status indicator and connector line with a title and description.
PageControlA row of dots that marks the current position in a paged or carousel view, with the active page shown as a darker dot.
ProgressBarA horizontal progress indicator that shows how far along a task is, either as one continuous linear bar or as a row of segmented steps, with an optional trailing count label.
Badge.NotificationA compact circular or pill-shaped count indicator used to surface unread items or activity on a parent element. Two axes: size (sm at 16pt, lg at 24pt) and type (text shows a numeric label, icon shows a small glyph). The background is always the error-status primary color, and the content is always on-dark.
Layout
Data Display
AvatarRepresents a person or entity as a photo, a person icon, or initials, sized sm through xl, shaped as a circle or a square, with an optional 1pt border.
AvatarGroupStacks two or more Avatar instances horizontally with a negative gap so each avatar overlaps the next. The group has a single Root slot; consumers fill it with any number of Avatar components at any supported size.
QRCodeA QR code on a rounded card, used to display a wallet or receive address for quick scanning. The card frames the code with consistent padding and corner radius so it drops cleanly into a receive or share flow.
Form
Select.ListA select row for choosing or disclosing a value, pairing a leading visual and a title with an optional description, a trailing selected value, and a chevron.
CheckboxSmall rounded square that is empty when unchecked and fills with the accent color and a white checkmark when checked, dimming the whole control when disabled.
RadioCircular control that shows an empty ring when unselected and an accent ring with a filled accent dot when selected, dimming the whole control when disabled.
ToggleA switch that flips a single setting on or off. On fills the track with the accent color and slides the knob right; off shows a neutral track with the knob left.
InputUnderline field with a floating label that rises to a small caption once the field is active. An optional leading country-code segment (hasCountryCode) prepends a value such as +1 for phone entry, and an optional date affordance (hasDate) turns it into a date field.
Checkbox.GroupA row that pairs a Checkbox with a two-line label block, combining a primary title and an optional secondary subtitle. The Checkbox slot is swappable, and the content area stacks Label.Title above Label.Subtitle in a vertical container.
Input.BalanceAn amount-entry row that shows a prompt label above a large display-weight currency value paired with an edit (pencil) icon. The state axis controls whether the value reads as a placeholder (default) or a committed entry (filled), and a hasSeparator boolean toggles a bottom divider for use inside list containers.
OTPA row of six underline digit cells for one-time password entry. The single variant axis is state, which drives the underline color and the blinking cursor visibility on the active cell.
Radio.GroupA row that pairs a Radio control with a two-line label block, combining a primary title and an optional secondary subtitle. The Radio slot is swappable via the Root SLOT property, and the content area stacks Label.Title above Label.Subtitle in a vertical container.
Toggle.GroupA labeled row that pairs a title and optional subtitle with a Toggle control. Composes a content block on the left and a toggle on the right, separated by a gap token, within a single horizontal slot.
Surface
SheetA bottom sheet surface with a grabber, a header block, a content slot, and a home indicator, rounded only on its top corners so it sits flush to the screen bottom.
CardA surface container that groups related content. The primary variant is an elevated white card with a soft shadow; the secondary variant is a flat tinted card with no shadow for grouping on a gray screen.
Card.BoostRewardAn elevated surface card that presents a single Boost reward with its animated icon, a configurable title, and a pill action button. The single axis is isCompleted, which switches the button between a Claim call-to-action and a countdown timer indicating when the reward resets.
Card.BoostA compact wallet card surface that surfaces the user's active Boost reward. Displays a branded illustrated orb, a primary APY or reward label, and a secondary metadata line such as an expiry date.
Card.GoalA compact savings-goal card that groups a goal avatar, title, progress amounts, and a linear progress bar into a single elevated surface. Exposes four axes: goal title text, current and target amounts, and an optional boost indicator icon.
Card.ReferralUserA surface card representing a single referred user in a referral program. It composes a circular avatar with initials, a user name, a description date line, an optional reward badge, and an optional segmented step progress bar. Two axes control the presentation: state (default or disabled) and isCompleted (false collapses the card to the compact completed state).
Card.ReferralA promotional surface card for referral program promotions. It composes a header illustration and availability badge, a body with a category badge plus title, subtitle, and description text, and a footer separator with a segmented progress bar.
Card.SelectAn elevated selection card that pairs a leading visual slot with a title, optional description, and an optional badge. The card communicates its selection state through a focused border stroke and a filled radio indicator.
Card.VerificationA compact surface card for identity verification prompts. It pairs an expiry badge, a description body, a masked verification method slot (phone, email, or passkey), and a trailing chevron icon into a horizontally composed container.
Utility
HomeIndicatorA pill-shaped home gesture indicator that sits at the bottom of the screen on modern iPhone and iPad devices. It adapts its width for device type (iPhone, iPad) and orientation (Portrait, Landscape), and can be hidden entirely via the hasIndicator boolean.
IconWrapperA fixed-square container that renders a single glyph at a consistent optical size. Two axes: platform (iOS renders an SF Symbol glyph via a Text layer; Android renders a Material icon via an Outlined instance) and size (md 24pt, sm 16pt, xs 12pt).
SlotA named placeholder that marks where a real subcomponent should be swapped in. It has no configurable variant axes and carries an instructional label, a safety-zone dashed border, and a low-opacity tinted background so slots are visually distinct from live content during composition.
GrabberThe drag handle at the top of a bottom sheet, a simple pill bar that gives users something to grab.