Avatar

Clickable, tooltip-ready avatars

Example

import React from 'react';
import Avatar from 'q3-ui/lib/avatar';
import { navigate } from '@reach/router'; 
import AccountBoxIcon from '@material-ui/icons/AccountBox';

export const ExampleAvatar = () => {
    const handleClick = React.useCallback(() => {
        navigate('/account')
    }, []);
    
    return (
        <Avatar 
            icon={AccountBox}
            tooltip="Visit account"
            onClick={handleClick}        
        />
    );
}

Usage

Prop	Description	Type
word	Fuels the "alt" attribute as well as the first letter to display	string
imgSrc	Path to a hosted image. Will fallback to the MUI BrokenLink icon	string
superscript	Content to display within an Avatar badge	string,number
large	Expands the scale of the Avatar	Boolean
tooltip	Wraps the Avatar in an accessible Tooltip component	string
onClick	Handles click and focus actions on the Avatar	function