Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Storybook

• 1. Import:

  To install GamiUI, run one of the following commands in your terminal:

  
  

  import { Avatar } from '@gamiui/standard'

• 2. Usage:

  
  
  Live Editor

  function Example(props) {
    return (
      <Row gap="10px" isWrap>
        <Avatar
          rounded="lg"
          size="md"
          src="https://i.imgur.com/vyW3w3r.png"
          zoomMode="inside"
        />
      </Row>
    );
  }
  

  Result

  Loading...

• 3. Sizes:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
          <Avatar
            rounded="lg"
            size="xs"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            size="sm"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            size="md"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            size="lg"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            size="full"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
            style={{
              maxHeight: '100px',
              maxWidth: '100px'
            }}
          />
        </Row>
      );
    }
  

  Result

  Loading...

• 4. Roundeds:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
          <Avatar
            background="#F76E11"
            rounded="none"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            background="#F76E11"
            rounded="xs"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            background="#F76E11"
            rounded="sm"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            background="#F76E11"
            rounded="md"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            background="#F76E11"
            rounded="lg"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
        </Row>
      );
    }
  

  Result

  Loading...

• 5. Shadows:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
          <Avatar
            rounded="lg"
            shadow="none"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="xs"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="sm"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="md"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="lg"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="full"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="primary"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="secondary"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="tertiary"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="cuaternary"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="success"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="warning"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="danger"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Avatar
            rounded="lg"
            shadow="info"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
        </Row>
      );
    }
  

  Result

  Loading...

• 6. Padding and margin:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
          <Avatar
            background="#F76E11"
            padding="10px"
            rounded="lg"
            src="https://i.imgur.com/vyW3w3r.png"
            zoomMode="inside"
          />
          <Container shadow="sm">
                <Avatar
                  background="#F76E11"
                  margin="10px"
                  rounded="lg"
                  src="https://i.imgur.com/vyW3w3r.png"
                  zoomMode="inside"
                />
          </Container>
        </Row>
      );
    }
  

  Result

  Loading...

• 7. Avatar Text:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
          <Avatar
            background="#54BAB9"
            text="Jesus"
            textColor="white"
          />
          <Avatar
            background="#54BAB9"
            text="Yei Linux"
            textColor="white"
          />
        </Row>
      );
    }
  

  Result

  Loading...

• 8. Avatar Icon:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
            <Avatar
              background="white"
              icon={<Icon name="facebook" size="25px"/>}
              shadow="md"
            />
            <Avatar
              background="white"
              icon={<Icon name="brain" size="25px"/>}
              shadow="md"
            />
        </Row>
      );
    }
  

  Result

  Loading...

• 9. Zoom Mode:

  
  
  Live Editor

    function Example(props) {
      return (
        <Row gap="10px" isWrap>
            <Avatar
              background="#F76E11"
              src="https://i.imgur.com/vyW3w3r.png"
              zoomMode="outside"
            />
            <Avatar
              background="#F76E11"
              src="https://i.imgur.com/vyW3w3r.png"
              zoomMode="inside"
            />
        </Row>
      );
    }
  

  Result

  Loading...

• API:

  Avatar Props