BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Components

    Accordion
    Actions
    Alert
    Autosuggest
    Avatar
    New
    Badge
    Bleed
    Box
    Button
    ButtonIcon
    ButtonLink
    Card
    Checkbox
    Columns
    ContentBlock
    Dialog
    Disclosure
    Divider
    Drawer
    Dropdown
    FieldLabel
    FieldMessage
    Heading
    Hidden
    HiddenVisually
    Inline
    List
    Loader
    MenuItem
    MenuItemCheckbox
    MenuItemDivider
    MenuRenderer
    MonthPicker
    Notice
    OverflowMenu
    Page
    PageBlock
    Pagination
    PasswordField
    RadioGroup
    Rating
    Secondary
    Spread
    Stack
    Stepper
    Strong
    Table
    Tabs
    Tag
    Text
    TextDropdown
    TextField
    TextLink
    TextLinkButton
    Textarea
    Tiles
    Toggle
    TooltipRenderer
    useToast

Logic

    BraidPortal
    BraidProvider
    BraidTestProvider
    Link
    ThemeNameConsumer
    useColor
    useResponsiveValue
    useSpace
    useThemeName

Avatar

  • DetailsDetails
  • PropsProps
  • Releases1Releases1
  • SnippetsSnippets

v34.9.0

Oct 1, 2026
  • Avatar: Add component

    A rounded-square identity mark for a person or company, providing a choice between an image, initials from name, a provided icon, or IconProfile.

    EXAMPLE USAGE:

    <Avatar name="Leia Organa" />
    <Avatar icon={<IconCompany />} />
    
BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles