<.avatar size="xs" src="img_1.png" />
<.avatar size="sm" src="img_1.png" />
<.avatar size="md" src="img_1.png" />
<.avatar size="lg" src="img_1.png" />
<.avatar size="xl" src="img_1.png" />

        

          <.avatar size="xs"/>
<.avatar size="sm"/>
<.avatar size="md"/>
<.avatar size="lg"/>
<.avatar size="xl"/>

        

          <.avatar name="Petal Components" size="xs" />
<.avatar name="Petal Components" size="sm"/>
<.avatar name="PC" />
<.avatar name="PC" size="lg"/>
<.avatar name="PC" size="xl"/>

        

          <.avatar name="Matt Platts" size="xs" random_color />
<.avatar name="Nic Hoban" size="sm" random_color />
<.avatar name="James Cameron" random_color />
<.avatar name="Will Smith" size="lg" random_color />
<.avatar name="Peter Jackson" size="xl" random_color />

        

          <.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="xs"/>
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="sm" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="md" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="lg" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="xl" />

        

          # Avatar
attr(:src, :string, default: nil, doc: "hosted avatar URL")
attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
attr(:class, :string, default: "", doc: "CSS class")
attr(:name, :string, default: nil, doc: "name for placeholder initials")

attr(:random_color, :boolean,
  default: false,
  doc: "generates a random color for placeholder initials avatar"
)

attr(:rest, :global)

# Avatar group
attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
attr(:class, :string, default: "", doc: "CSS class")
attr(:avatars, :list, default: [], doc: "list of your hosted avatar URLs")
attr(:rest, :global)