Role Format

RoleFormat prints a role the way the rest of the site does: its color, its prefix icon or emoji, and its name in the reader's language. Use it in profiles, member tables and filters.

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { RoleFormat } from '@vitnode/core/components/role-format'

<RoleFormat role={role} />

role has the same shape the roles API returns, so you can pass a role straight from a response:

const role = {
  color: '#16a34a',
  id: 2,
  name: [
    { languageCode: 'en', name: 'Moderator' },
    { languageCode: 'pl', name: 'Moderator' },
  ],
  prefix: 'icon:shield',
}

Names per languageCopy Anchor Link

RoleFormat picks the name for the active locale. When a role has no translation for it, the first name in the list shows instead, and a role with no names at all shows its id. That way a role added before a new language still has a readable label.

Colors and prefixesCopy Anchor Link

A null color keeps the surrounding text color. prefix takes the same icon:<lucide-name> or emoji:<emoji> value as a role's prefix in the AdminCP. An empty or invalid prefix is skipped.

Long namesCopy Anchor Link

In a narrow table cell or chip, add truncate so a long name ends in an ellipsis instead of pushing the layout wider:

<RoleFormat className="truncate" role={role} />

PropsCopy Anchor Link

Other <span> props, such as style or title, go to the outer <span>.

See alsoCopy Anchor Link

• User Format - a member's name in their role's style.
• Roles - pick one role or many in an Auto Form field.
• Data Table filters - role filters with RoleFormat labels.