ion-avatar
Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
Avatars can be used by themselves or inside of any element. If placed inside of an ion-chip or ion-item, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to start or end, respectively.
Basic Usage
Chip Avatar
Item Avatar
Theming
CSS Custom Properties
Properties
disabled
| Description | If true, the user cannot interact with the avatar. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
mode
| Description | The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
shape
| Description | Set to "soft" for an avatar with slightly rounded corners, "round" for an avatar with fully rounded corners, or "rectangular" for an avatar without rounded corners.Defaults to "round" for the ionic theme, undefined for all other themes. |
| Attribute | shape |
| Type | "rectangular" ｜ "round" ｜ "soft" ｜ undefined |
| Default | undefined |
size
| Description | Set to "xxsmall" for the smallest size. Set to "xsmall" for a very small size. Set to "small" for a compact size. Set to "medium" for the default height and width. Set to "large" for a larger size. Set to "xlarge" for the largest dimensions.Defaults to "medium" for the ionic theme, undefined for all other themes. |
| Attribute | size |
| Type | "large" ｜ "medium" ｜ "small" ｜ "xlarge" ｜ "xsmall" ｜ "xxsmall" ｜ undefined |
| Default | undefined |
theme
| Description | The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | theme |
| Type | "ios" ｜ "md" ｜ "ionic" |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
- iOS
- MD
| Name | Description |
|---|---|
--border-radius | Border radius of the avatar and inner image |
| Name | Description |
|---|---|
--border-radius | Border radius of the avatar and inner image |
Slots
No slots available for this component.