Marigold
Getting StartedFoundationsComponentsPatternsRecipesReleases
Discover new Tutorials!

Patterns

OverviewAdmin- and Mastermark
new
Building FormsFeedback MessagesLoading StatesMultiple Selection

Admin- and Mastermark

Marking internal-only features.

The admin- and master mark is a visual pattern used to signal that a setting or function is not available to organizers, but reserved for internal use by developers or Reservix employees. It provides a clear boundary between organizer-facing features and internal tools, helping designers and developers avoid accidental exposure of internal controls in user interfaces.

Anatomy

The admin- and master mark uses color and labeling to indicate internal access. It appears either as a badge placed near the related element or section of a page, or through direct coloring of the element itself.

The badge contains the text "Admin" or "Master", depending on the role. To ensure quick visual differentiation, "Admin" is represented in orange and "Master" in purple. This consistent use of color helps communicate access levels clearly and supports scannability in shared interfaces.

Admin
Master

Usage

The admin- and master mark is used to indicate that certain features in the user interface are not intended and visible for end users. In shared views where both internal users and end users operate, this pattern helps prevent confusion and highlights which elements are meant for internal use only.

  • The "Admin" mark is applied to elements intended for developers. This includes technical tools such as environment toggles, debug options, or features still under development.
  • The "Master" mark is used for features that are available to Reservix employees, such as internal workflows, support-only settings, or tools used by account management teams.

Apply the admin- and master mark in situations where internal-only functionality appears in shared views. Typical scenarios include:

  • Controls in user interfaces visible to external users.
  • Developer-specific configuration options that are not part of the public feature set.
  • Features that are technically in production but intentionally hidden from or not relevant to external users.
  • Functionality that is still under development, can only be partially enabled, or currently in a testing or staging phase.

This pattern is not a substitute for proper role-based access control. It should not be used to control visibility or enforce permissions. It also does not need to be applied in fully internal tools where organizers do not have access at all since in those cases, there is no risk of confusion and no need for additional visual marking.

Placement

The admin- and master mark should be placed directly to the right of the label or heading of the section or element it applies to. This ensures the access distinction is immediately visible and clearly associated with the relevant control.

Use the <Badge> component with the "master" or "admin" variant to place the mark next to the label in form fields or input groups. This ensures that users understand the access level before interacting with the field. Placing it beside the label ensures a clean layout and avoids any confusion about its relation to the field content.

In navigation elements such as tabs or grouped settings, place the mark next to the tab label or section heading. This makes it clear that the entire area is intended for internal use.

Preview
Code
Overview
Events
Sales Notes
Admin
Organizer Type
Associated Team
Master

Avoid placing the mark at a distance from the related element. Doing so reduces clarity and can lead to incorrect assumptions about access. The mark is a functional visual indicator and should be treated with the same attention as labels or status cues.

Within a Table

In tables, the admin- and master mark is not applied as a badge. Instead, internal-only rows are visually distinguished through background color and a subtle inline indicator. To apply the color use the "master" or "admin" variant on the <Table.Row> component.

This exception is intentional. Since badges can clutter dense tabular layouts, a more lightweight visual cue is used to signal internal visibility. A soft background tint helps set these rows apart without disrupting the structure of the table. An inline label or icon may be used when additional clarity is needed.

Use this approach when:

  • A table contains a mix of internal and external data
  • Some rows are only relevant to internal users (e.g. test entries, system-generated records, flagged data)
  • You want to preserve alignment and readability without adding badges to every row
Preview
Code
Event NameDateStatus
Spring GalaApril 15, 2025Confirmed
Jazz NightMay 2, 2025Sold Out
System Test Entry–Internal
Open Air TheaterJune 10, 2025On Sale
Flagged: Duplicate Listing-Review Needed

Related

Table
Organize and display large amout of data in table format.
Badge
Component for short notes with one color as status messages
Last update: 14 days ago
Build with 🥵, 🧡 and
v14.1.1