TopBar
The header of a phone screen: back or menu, a title, trailing actions, and the status-bar strip.
Ask
- Why do Catholics confess to a priest?2 hours ago
- Is it a sin to miss Mass when I am sick, or when I am up all night caring for a newborn?Yesterday
- Explain todayΓÇÖs Gospel3 days ago
Confession to a priest
Narrated by an Athic author
Catholics confess to a priest because Jesus gave his Apostles the ministry of reconciliation. ΓÇ£Whose sins you shall forgive, they are forgiven themΓÇ¥ (John 20:23).
Ask
Confession to a priest and the seal of the confessional
Your Profile
Your Details
Library
Library
Ask
Confession to a priest
The Rosary, decade by decade
Ask
Your Topics
In context
Today · Friday 24 October
Saint Raphael the Archangel
Today’s Gospel
Luke 12:1-7
Nothing is hidden that will not be revealed. Even the hairs of your head are all counted.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
leading | ReactNode | No | none |
onBack | (() => void) | undefined | No | — |
onMenu | (() => void) | undefined | No | — |
backIcon | ReactNode | No | — |
menuIcon | ReactNode | No | — |
title | ReactNode | TopBarEditableTitle | No | — |
logo | ReactNode | No | — |
align | "center" | "start" | undefined | No | start |
trailing | ReactNode | No | — |
tone | "solid" | "overlay" | undefined | No | solid |
safeArea | boolean | "top" | undefined | No | true |
sticky | boolean | undefined | No | — |
badge | boolean | undefined | No | — |
badgeLabel | string | undefined | No | New activity |
Accessibility
A <header> with the title as the page <h1>. The built-in back and menu buttons are 44px targets named Back and Menu; the status-bar strip is aria-hidden. An editable title is a button (Title: …, Edit) that becomes a text field: Enter or the check button saves, Escape cancels. A badge dot is an image labelled New activity.
data-rebar-* attributes
data-rebar-component="top-bar", data-rebar-tone="solid" | "overlay", data-rebar-align, data-rebar-sticky; parts safe-area, bar, leading, title, logo, trailing, badge, edit. Set --rebar-top-bar-safe-area to override env(safe-area-inset-top) and --rebar-top-bar-height (default 56px) to resize the bar. A bare <button> holding one svg in trailing is sized, rounded and recoloured by the bar.