Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
      • date range
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Input errors
    • Loader
    • Modal
    • Month picker
    • Multistep
      • multistep
      • step
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Avatar

A component that shows user initials.

Usage

import { RAvatar } from "@rebilly/revel";

<r-avatar initials="jd" />

Example

avatar-basic.vue
avatar-icon.vue
avatar-image.vue
avatar-description.vue

API

Props

NameTypeDefaultDescription
initialsstring

Display initials

descriptionstring

A text to describe the avatar

imagestring

The avatar image

colorstring

Color for the avatar

iconIconNames

Icon for the avatar

Slots

NameDescription
default

Additional description content

Edit this page
Prev
Alert
Next
Badge