Avatar
Profile picture, user initials or fallback icon.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: flex; align-items: center; gap: 1rem;">
<rdx-theme-avatar
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar fallback="A" />
</div>
`
})
export class AvatarComponent {}
API Reference
This component inherits props from the Avatar primitive .
Examples
Size
Use the size prop to control the size of the avatar.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-sizes-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: flex; align-items: center; gap: 1rem;">
<rdx-theme-avatar
size="1"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="2"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="3"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="4"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="5"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="6"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="7"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
<rdx-theme-avatar
size="8"
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
fallback="A"
/>
</div>
`
})
export class AvatarSizeComponent {}
Variant
Use the variant prop to control the visual style of the avatar.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-variant-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: flex; gap: 1rem;">
<rdx-theme-avatar variant="solid" fallback="A" />
<rdx-theme-avatar variant="soft" fallback="A" />
</div>
`
})
export class AvatarVariantComponent {}
Color
Use the color prop to assign a specific color.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-color-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: flex; gap: 1rem;">
<rdx-theme-avatar variant="solid" color="indigo" fallback="A" />
<rdx-theme-avatar variant="solid" color="cyan" fallback="A" />
<rdx-theme-avatar variant="solid" color="orange" fallback="A" />
<rdx-theme-avatar variant="solid" color="crimson" fallback="A" />
</div>
`
})
export class AvatarColorComponent {}
High-contrast
Use the highContrast prop to increase color contrast with the background.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-hc-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: inline-grid; grid-template-rows: repeat(2, 1fr); gap: 8px; grid-auto-flow: column;">
<rdx-theme-avatar variant="solid" color="indigo" fallback="A" />
<rdx-theme-avatar variant="solid" color="indigo" fallback="A" highContrast />
<rdx-theme-avatar variant="solid" color="cyan" fallback="A" />
<rdx-theme-avatar variant="solid" color="cyan" fallback="A" highContrast />
<rdx-theme-avatar variant="solid" color="orange" fallback="A" />
<rdx-theme-avatar variant="solid" color="orange" fallback="A" highContrast />
<rdx-theme-avatar variant="solid" color="crimson" fallback="A" />
<rdx-theme-avatar variant="solid" color="crimson" fallback="A" highContrast />
<rdx-theme-avatar variant="solid" color="gray" fallback="A" />
<rdx-theme-avatar variant="solid" color="gray" fallback="A" highContrast />
</div>
`
})
export class AvatarHcComponent {}
Radius
Use the radius prop to assign a specific radius value.
Loading...
import { Component } from '@angular/core';
import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
import { RdxThemeDirective } from '@radix-ng/components/theme';
@Component({
selector: 'avatar-radius-demo',
standalone: true,
imports: [RdxThemeAvatarComponent],
hostDirectives: [RdxThemeDirective],
template: `
<div style="display: flex; gap: 1rem;">
<rdx-theme-avatar radius="none" fallback="A" />
<rdx-theme-avatar radius="large" fallback="A" />
<rdx-theme-avatar radius="full" fallback="A" />
</div>
`
})
export class AvatarRadiusComponent {}