Skip to content

Names

Experimental

Names is used to render one or more names, e.g., authors of a blog post or speakers at an event. It is an alternative to using Avatars.

Examples

In this example we render a few names with default alignment (start):

Berenice Feldmus, Sidonnie Halbeard, Jacenta Busch, Mercie Kuban, Candis Ruggs

You can also align center:

Berenice Feldmus, Sidonnie Halbeard, Jacenta Busch, Mercie Kuban, Candis Ruggs

Or align end:

Berenice Feldmus, Sidonnie Halbeard, Jacenta Busch, Mercie Kuban, Candis Ruggs

Now we render many names that trigger line wraps:

Nance MacFadin, Clifford Skipperbottom, Willow Rangall, Suzy Cahan, Sandra Abramovici, Jan McKea, Ola Brunger, Ivette Rowlinson, Madeleine Stredwick, Lin Billson, Alfie Piborn, Garvy Bartlomiej, Gustavus Splevings, Cristi Tale, Gae Phinn, Leoline Hacaud, Rufe Rockhill, Bernadene van der Velden, Edithe Densell, Emmalynne Sone, Ardella Sapir, Ilise Sailor, Anita Olander, Gerik Frisby, Rayshell Marmion, Brooks Grene, Bev Dorey, Vladimir Parres, Really really really really really really really really really really long name

System props

Names supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
valuesArray of stringArray with names to be rendered.
alignstart, center or endstartAlignment of names (responsive).
variantStringnames.defaultOptional variant for customizations.

Variants

The default variant is names.default, which can be optionally defined in your theme. Names uses default styles if no variant is defined. You can also define your own variant under any key you like and provide that key to the variant prop.

In this example we define default variant names.default to render Names bold:

Berenice Feldmus, Sidonnie Halbeard, Jacenta Busch, Mercie Kuban, Candis Ruggs

In the follwoing example we define variant names.emphasize to render names italic:

Berenice Feldmus, Sidonnie Halbeard, Jacenta Busch, Mercie Kuban, Candis Ruggs

Visual regression testing

The following URLs can be used for visual regression testing: