Role Badge Assign
Granting a role slides the selection pill and settles a new badge onto the member row.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Role Badge Assign
*
* Changing a member's permissions is a consequential edit that usually
* looks like a dropdown closing. Here the selection pill slides to theAbout this pattern
Permission changes are consequential edits that normally look like a dropdown closing. This makes the grant visible in the row it applies to: a single selection pill travels between the role chips, so the choice reads as one object moving rather than three colours changing, and the badge beside the member name is replaced in the same beat. The badge is a word, so it rises and fades but never scales or rebounds — the only element that changes size is a ring behind it, which contains no text and expands exactly once. The badge slot is a fixed box, so replacing one word with another never reflows the row.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Team members
Access levels change inline on the row for the person they apply to.
Related patterns
- Recovery Codes RevealBlurred backup codes sharpen across the grid once revealed, then copy in one press.
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.
- Permission Scope ListA consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.