Avatar

const Preview = () => <Avatar aria-label='Ola Nordmann' />;

render(<Preview />)

const Initials = () => <Avatar aria-label='Ola Nordmann'>ON</Avatar>;

render(<Initials />)

const WithImageAndIcon = () => (
  <>
    <Avatar aria-label='Ola Nordmann'>
      <img src='/img/component-docs/cats/cat1.webp' alt='' />
    </Avatar>
    <Avatar aria-label='Ola Nordmann'>
      <BriefcaseIcon />
    </Avatar>
  </>
);

render(<WithImageAndIcon />)

const Radius = () => (
  <>
    <Avatar aria-label='radius default' />
    <Avatar
      aria-label='radius 1rem'
      style={
        {
          '--dsc-avatar-radius': '1rem',
        } as React.CSSProperties
      }
    />
    <Avatar
      aria-label='radius lg'
      style={
        {
          '--dsc-avatar-radius': 'var(--ds-border-radius-lg)',
        } as React.CSSProperties
      }
    >
      ON
    </Avatar>
    <Avatar
      aria-label='radius none'
      style={
        {
          '--dsc-avatar-radius': '0',
        } as React.CSSProperties
      }
    >
      ON
    </Avatar>
  </>
);

render(<Radius />)