diff --git a/.changeset/fix-avatar-status-badge-text.md b/.changeset/fix-avatar-status-badge-text.md
new file mode 100644
index 000000000..9388970e6
--- /dev/null
+++ b/.changeset/fix-avatar-status-badge-text.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fixed the unreadable "5" badge in the avatar status docs example by adding `text-gray-100`.
diff --git a/docs/content/ui/components/avatar.mdx b/docs/content/ui/components/avatar.mdx
index 492010ba3..3b896afe1 100644
--- a/docs/content/ui/components/avatar.mdx
+++ b/docs/content/ui/components/avatar.mdx
@@ -34,21 +34,22 @@ classnames:
- class: avatar-{size}
desc: From avatar-xxs to avatar-2xl; avatar-list-{size} sizes a whole list
---
-import Example from '@components/Example.astro';
-import Icon from '@ui/Icon.astro';
-import AvatarList from '@ui/AvatarList.astro';
-import CodeDocs from '@components/CodeDocs.astro';
+
+import Example from '@components/Example.astro'
+import Icon from '@ui/Icon.astro'
+import AvatarList from '@ui/AvatarList.astro'
+import CodeDocs from '@components/CodeDocs.astro'
## Default markup
Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.
-
-
- JL
-
-
+
+
+ JL
+
+
## Avatar image
@@ -56,11 +57,11 @@ Add the `avatar` class to a `span`. Fill it with a picture as a `background-imag
Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.
-
-
-
-
-
+
+
+
+
+
## Initials
@@ -68,13 +69,13 @@ Set the picture as a `background-image` on the avatar. It's cropped to the avata
When there is no picture, put the initials as text inside the avatar.
-
- AB
- CD
- EF
- GH
- IJ
-
+
+ AB
+ CD
+ EF
+ GH
+ IJ
+
## Avatar icons
@@ -82,11 +83,17 @@ When there is no picture, put the initials as text inside the avatar.
An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
## Avatar initials color
@@ -94,13 +101,13 @@ An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for
Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.
-
- AB
- CD
- EF
- GH
- IJ
-
+
+ AB
+ CD
+ EF
+ GH
+ IJ
+
## Avatar size
@@ -108,13 +115,13 @@ Set the background with a `bg-*` class from the [color palette](/ui/base/colors)
Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
## Avatar status
@@ -122,22 +129,25 @@ Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual B
Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.
-
-
-
-
-
-
-
-
- SA
-
-
-
-
- 5
-
-
+
+
+
+
+
+
+
+
+
+ {' '}
+ SA{' '}
+
+
+
+
+
+ 5
+
+
## Avatar shape
@@ -145,21 +155,21 @@ Add a [status indicator](/ui/components/status) to show whether a user is online
An avatar is a circle by default. Add `avatar-square` to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person.
-
-
-
- TB
- AA
-
+
+
+
+ TB
+ AA
+
For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corners, and `rounded-3` a larger radius than `avatar-square`.
-
-
-
-
+
+
+
+
## Avatar brand
@@ -167,14 +177,14 @@ For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corner
Add a `avatar-brand` element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
## Avatar on a cover
@@ -182,16 +192,16 @@ Add a `avatar-brand` element inside an avatar to mark where the account comes fr
Add `avatar-cover` to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image.
-
-
-
-
-
-
Paweł Kuna
-
UI Designer
+
+
+
+
+
+
Paweł Kuna
+
UI Designer
+
-
## Avatar upload
@@ -201,11 +211,17 @@ Use the `avatar-upload` class together with `avatar` to show an empty avatar slo
Put an icon inside to show the action. The variant is often used as a link or a button.
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
## Avatar upload size
@@ -213,13 +229,23 @@ Put an icon inside to show the action. The variant is often used as a link or a
The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Avatar upload text
@@ -227,16 +253,16 @@ The upload avatar uses the same size classes as a normal avatar, from `avatar-xx
Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.
-
-
-
- Upload
-
-
-
- Add photo
-
-
+
+
+
+ Upload
+
+
+
+ Add photo
+
+
## Avatar upload in a form
@@ -244,18 +270,20 @@ Add a short label under the icon with the `avatar-upload-text` class. The conten
To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links.
-
-
-
-
+
+
+
+
+
+
+
+
Click to upload a new avatar
+
-
-
-
Click to upload a new avatar
-
-
## Avatar list
@@ -263,13 +291,13 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.
-
-
- JL
-
-
-
-
+
+
+ JL
+
+
+
+
## Stacked list
@@ -277,11 +305,21 @@ Put several avatars in an `.avatar-list` container. It keeps consistent spacing
Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.
-EB+8
+
+ {' '}
+ EB {' '}
+ +8{' '}
+
-SA
+
+ {' '}
+ {' '}
+ SA {' '}
+ {' '}
+ {' '}
+
## Accessibility