Skip to canvas
Proton Design System
/
Introduction
Changelog
Colors
Icons
Layers Management
Responsive
Sass Css Variables
Typography
Alert
Autocomplete
Badge
ButtonGroup
Checkbox
Collapsible
Copy
CountrySelect
DateInput
Details
Dropdown
Dropzone
EllipsisLoader
Errors
Icon
InputButton
InputField
InputFieldStacked
LabelStack
Logo
Meter
MiddleEllipsis
Modal
Notification
Price
Progress
Promotion Button
QuickSettings
Radio
Scale
Select
Spotlight
Table
Tabs
Toggle
TopBanner
TotpInput
VideoInstructions
AvatarSkip to canvas
Banner
Button
Card
CircleLoader
DashboardCard
Donut
Href
InlineLinkButton
Input
Kbd
NotificationDot
Pill
ProtonLoader
Scroll
Slider
Stepper
UserAvatar
VerticalSteps
Vr
Border
Border Radius
Colors
Columns
Cursor
Divide
ExpandClickArea
Gap
HidingDisablingContent
InteractiveFocusHelper
Lists
Margin
Opacity
OpacityOnHover
Padding
Position
Print
Ratio Container
Responsive
Scroll
Shadow
Sizing
Transforms
Typography
  1. Recently opened
  2. Avatarcomponents
  3. Back to componentsESC
  4. Clear history
Skip to sidebar
1import type { AvatarProps } from './Avatar'; 2import Avatar from './Avatar'; 3import mdx from './Avatar.mdx'; 4 5export default { 6 component: Avatar, 7 title: 'components/Avatar', 8 parameters: { docs: { page: mdx } }, 9}; 10 11export const Playground = ({ ...args }) => <Avatar {...args}>PM</Avatar>; 12 13const args: AvatarProps<'span'> = {}; 14 15Playground.args = args; 16
17export const Basic = () => <Avatar>HF</Avatar>;