flx

Info, success, warning, and error tones stacked.

All six variants side-by-side: default, secondary, outline, ghost, destructive, link.

Default, outline, and muted variants side-by-side.

The Flexnative shell as shipped: near-neutral surfaces, a warm charcoal primary, soft gray chrome and the same radius and shadows as the app itself.

6-digit InputOTP with separator; Verify footer.

Key-value details with row headers down the left.

Stacked column of buttons with merged borders, used for vertical navigation menus.

Vertical orientation with underline indicators, suited for sidebar navigation.

Three-dot icon button in the header corner opens a dropdown with rename, share, and delete options.

Message paired with Later and Update now buttons.

First-run state with primary and secondary CTAs.

Avatar, name, role, and a trailing action button.

Input with trailing search icon addon.

Password input with a trailing eye-off icon to indicate visibility toggle.

Assignee chip with a leading avatar inside the badge.

User picker style button with a small avatar image leading the text label.

User avatar photo placed before the name and subtitle.

User picker with avatars in trigger and options.

Notification count badge overlapping an icon button.

Select-all header, per-row checkboxes, and a selection count.

Clear button appears in the trailing addon when the field has text.

Trigger labels paired with secondary count badges.

Nested ButtonGroup: currency Select, amount input, and submit icon button.

Checkbox with a label and helper description.

Label and helper description beside the switch.

Options show a bold label and a muted description sub-line; the trigger shows only the label after selection.

A menu item opens a controlled confirmation dialog.

Ghost icon Button opens a menu of the hidden levels.

Trailing addon button opens a menu to choose search scope.

Middle levels replaced by a static ellipsis icon, showing only the first and last crumbs.

Username field with a fixed @company.com suffix addon, locking the email domain.

TanStack Table, global search input plus a status column filter dropdown.

Popover with a bold title and a short description below it.

Leading verified icon before the label.

Leading icon placed before the title and description.

Leading icon beside each trigger label.

Each crumb prefixed with a small icon, such as a house, folder, or file.

Tabs with a small icon placed before each label in the trigger.

Options with leading icons.

Leading icons paired with trailing keyboard shortcuts.

Top media banner above title, body, and a CTA footer.

Avatar thumbnails beside name and email in each row.

Muted prefix label inside the trigger, left of the selected value.

Combobox composed with an accessible field Label.

Switch paired with an accessible field label.

Accessible field label linked to the select trigger.

Static text label leading a group of action buttons, useful for labelled sort or filter controls.

Button with an icon placed before the text label.