Add docs for Avatar, Icon; Reformat Badge docs

[martinxu9]

Summary

• Docs for avatar, icon
• Rearrange Badge docs per https://www.notion.so/reflex-dev/Usage-Low-Level-c2ecd6baf14f461c8c4a6a490c28f96b?pvs=4
• Needs Clean up Radix Avatar components props reflex#2375 to compile properly

[masenf]

Suggested change

	We use the highContrast prop to increase color contrast of the fallback text with the background.
	We use the `high_contrast` prop to increase color contrast of the fallback text with the background.

[martinxu9]

oh .... thanks 🥲

[masenf]

Suggested change

	We use the radius prop to assign a specific radius value, ignoring the global theme.
	We use the `radius` prop to assign a specific radius value, ignoring the global theme.

[masenf]

not sure if we also want the "It can take values "none" | "small" | "medium" | "large" | "full"." bit as well

[martinxu9]

Yes, adding them in 22d1acd

[masenf]

Suggested change

	We use the fallback prop to modify the rendered fallback text.
	We use the `fallback` prop to modify the rendered fallback text.

[masenf]

Suggested change

	CalloutRoot.create(
	CalloutIcon.create(icon(tag="check_circled", variant="solid", high_contrast=True, color="green")),
	CalloutText.create("Below is a list of all available icons.", color="black", weight="bold"),
	color="green",
	),
	callout_root(
	callout_icon(tag="check_circled", variant="solid", high_contrast=True, color="green")),
	callout_text("Below is a list of all available icons.", color="black", weight="bold"),
	color="green",
	),

haven't tried if this actually works, but we should avoid explicitly calling .create throughout

[martinxu9]

The creates do work. Not sure why I thought the snake cases were not defined and I needed to do creates 🤦🏼 I was using the flex, icon, etc just fine

[masenf]

Suggested change

	The icons are based on the Radix primitive component, and it is unstyled. It does not accept common styling props such as `size` or `color_theme`. You can still use `width` and `height` together to control the size of the icon, and specify its `color`.
	The icons are based on the Radix primitive component, and it is unstyled. **It does not accept common styling props such as `size` or `color_scheme`**. You can still use `width` and `height` together to control the size of the icon, and specify its `color`.

[masenf]

are these intended to be CSS colors? or radix themes colors?

i think at least one example should show color="var(--accent-10)" to link up with radix themes values.

[martinxu9]

I want to say these are css colors? The component itself is supposedly primitive and does not take the common props. Just tried, the radix colors work, gonna add a couple examples there.

[martinxu9]

added in b550f41

[martinxu9]

[martinxu9]

revision uploaded! @masenf PTAL

[Alek99]

Can we break this up into sections like radix and include a link to radix icons at the top of the file as a source.

[Alek99]

Also maybe make them smaller and 4 or 5 width hard to scroll through and consume all of them