Top bars display information and actions at the top of the screen, helping people navigate or perform specific actions.
As known as:
Top Bar - Center-aligned
| Core | ||
|---|---|---|
| Property Name | Property Type | Property Value |
| (L) Action | Variant | Icon |
| Label | ||
| Icon+Label | ||
| (R) Action | Variant | None |
| Icon | ||
| Label | ||
| Button | ||
| (L) Icon | Instance Swap | |
| (L) Action Label | Text | |
| Title | Text | |
| (R) Icon - 1 | Instance Swap | |
| (R) Icon - 2 | Instance Swap | |
| (R) Action Label | Text |
Top Bars - Left-aligned
| Core | ||
|---|---|---|
| Property Name | Property Type | Property Value |
| (L) Icon | Variant | None |
| Icon | ||
| (R) Action | Variant | Icon |
| Label | ||
| Button | ||
| None | ||
| (L) Icon | Instance Swap | |
| Title | Text | |
| (R) Icon - 1 | Instance Swap | |
| (R) Icon - 2 | Instance Swap | |
| (R) Action Label | Text |
Top Bars - Large
| Core | ||
|---|---|---|
| Property Name | Property Type | Property Value |
| (L) Action | Variant | None |
| Icon | ||
| (R) Action | Variant | None |
| Icon | ||
| Label | ||
| Button | ||
| isCaption | Variant | False |
| True | ||
| (L) Icon | Instance Swap | |
| Title | Text | |
| Caption | Text | |
| (R) Icon - 1 | Instance Swap | |
| (R) Icon - 2 | Instance Swap |