Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Rename element list classes to singular and use them in examples (#2853)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-08-12 00:10:20 +02:00
1 parent 5fe6722a32
commit ffe3489345
24 files changed
+139 -110
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/generate-changeset/SKILL.md
-1
View File
@@ -4,7 +4,6 @@ description: >-
Creates a Tabler changeset file in `.changeset/` from the current code Creates a Tabler changeset file in `.changeset/` from the current code
changes. Use when the user asks for a changeset, version bump, release note changes. Use when the user asks for a changeset, version bump, release note
entry, or changelog entry for @tabler/core, @tabler/preview, or @tabler/docs. entry, or changelog entry for @tabler/core, @tabler/preview, or @tabler/docs.
disable-model-invocation: true
--- ---
# Generate changeset # Generate changeset
.agents/skills/mr-description/SKILL.md
-1
View File
@@ -5,7 +5,6 @@ description: >-
from the current branch versus origin/dev (Tabler). Use when the from the current branch versus origin/dev (Tabler). Use when the
user asks for an MR/PR description, GitLab merge request text, or a branch user asks for an MR/PR description, GitLab merge request text, or a branch
summary for reviewers. summary for reviewers.
disable-model-invocation: true
--- ---
# MR / PR description from branch # MR / PR description from branch
.changeset/badge-tag-list-rename.md
+9
View File
@@ -0,0 +1,9 @@
---
'@tabler/core': patch
'@tabler/preview': patch
'@tabler/docs': patch
---
Renamed `.badges-list` to `.badge-list` and `.tags-list` to `.tag-list` so every element list follows the same singular naming as `.btn-list` and `.avatar-list`. The old class names still work as deprecated aliases. Documentation examples and preview pages that show several buttons, badges, avatars, or tags in one
row now use the matching list container, including the job listing page, which was using a `badges`
class that had no styles at all.
core/scss/ui/_badges.scss
+3 -1
View File
@@ -70,9 +70,11 @@
} }
// //
// Badges list // Badge list
// //
.badge-list,
.badges-list { .badges-list {
// `.badges-list` is deprecated, use `.badge-list` instead
@include elements-list(); @include elements-list();
} }
core/scss/ui/_tags.scss
+3 -1
View File
@@ -66,8 +66,10 @@
} }
// //
// Tags list // Tag list
// //
.tag-list,
.tags-list { .tags-list {
// `.tags-list` is deprecated, use `.tag-list` instead
@include elements-list(); @include elements-list();
} }
docs/content/ui/components/avatar.mdx
+13 -13
View File
@@ -14,7 +14,7 @@ import CodeDocs from '@components/CodeDocs.astro';
Use the `avatar` class to add an avatar to your interface design for greater customization. Use the `avatar` class to add an avatar to your interface design for greater customization.
<Example centered> <Example centered>
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span> <AvatarList> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span> </AvatarList>
</Example> </Example>
## Avatar image ## Avatar image
@@ -22,7 +22,7 @@ Use the `avatar` class to add an avatar to your interface design for greater cus
Set an image as the background to make users easy to indentify and create a personalized experience. Set an image as the background to make users easy to indentify and create a personalized experience.
<Example centered> <Example centered>
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span> <AvatarList> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span> </AvatarList>
</Example> </Example>
## Initials ## Initials
@@ -30,7 +30,7 @@ Set an image as the background to make users easy to indentify and create a pers
You can also use initials instead of pictures. You can also use initials instead of pictures.
<Example centered> <Example centered>
<span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span> <AvatarList> <span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span> </AvatarList>
</Example> </Example>
## Avatar icons ## Avatar icons
@@ -38,7 +38,7 @@ You can also use initials instead of pictures.
Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal. Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal.
<Example centered> <Example centered>
<span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span> <AvatarList> <span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span> </AvatarList>
</Example> </Example>
## Avatar initials color ## Avatar initials color
@@ -46,7 +46,7 @@ Besides pictures and initials, you can also use [icons](/ui/components/icon) to
Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details. Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
<Example centered> <Example centered>
<span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span> <AvatarList> <span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span> </AvatarList>
</Example> </Example>
## Avatar size ## Avatar size
@@ -54,7 +54,7 @@ Customize the color of the avatars' background. See the [full list of available
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need. Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
<Example centered> <Example centered>
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span> <AvatarList> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span> </AvatarList>
</Example> </Example>
## Avatar status ## Avatar status
@@ -62,7 +62,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received. Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
<Example centered> <Example centered>
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span> <AvatarList> <span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span> </AvatarList>
</Example> </Example>
## Avatar shape ## Avatar shape
@@ -70,7 +70,7 @@ Add a [status indicator](/ui/components/status) to your avatar to show, for inst
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius. Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
<Example centered> <Example centered>
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span> <AvatarList> <span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span> </AvatarList>
</Example> </Example>
## Avatar upload ## Avatar upload
@@ -80,7 +80,7 @@ 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. Put an icon inside to show the action. The variant is often used as a link or a button.
<Example centered> <Example centered>
<a href="#" class="avatar avatar-upload"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded-0"> <Icon name="camera" /> </a> <AvatarList> <a href="#" class="avatar avatar-upload"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded-0"> <Icon name="camera" /> </a> </AvatarList>
</Example> </Example>
## Avatar upload size ## Avatar upload size
@@ -88,7 +88,7 @@ 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`. The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
<Example centered> <Example centered>
<a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-lg rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-sm rounded"> <Icon name="plus" /> </a> <AvatarList> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-lg rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-sm rounded"> <Icon name="plus" /> </a> </AvatarList>
</Example> </Example>
## Avatar upload text ## Avatar upload text
@@ -96,7 +96,7 @@ 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. 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.
<Example centered> <Example centered>
<a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> <span class="avatar-upload-text">Upload</span> </a> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="camera" /> <span class="avatar-upload-text">Add photo</span> </a> <AvatarList> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> <span class="avatar-upload-text">Upload</span> </a> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="camera" /> <span class="avatar-upload-text">Add photo</span> </a> </AvatarList>
</Example> </Example>
## Avatar upload in a form ## Avatar upload in a form
@@ -107,9 +107,9 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
<div class="row align-items-end" style="width: 100%;"> <div class="col-auto"> <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer"> <Icon name="plus" /> </label> <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" /> </div> <div class="col"> <label class="form-label" for="avatar-file">Avatar</label> <div class="text-secondary">Click to upload a new avatar</div> </div> </div> <div class="row align-items-end" style="width: 100%;"> <div class="col-auto"> <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer"> <Icon name="plus" /> </label> <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" /> </div> <div class="col"> <label class="form-label" for="avatar-file">Avatar</label> <div class="text-secondary">Click to upload a new avatar</div> </div> </div>
</Example> </Example>
## Avatars list ## Avatar list
Create a list of avatars within one parent container. Use the `.avatar-list` container to create a list of avatars within one parent container. It keeps consistent spacing between items and wraps them when there is not enough space.
<Example centered> <Example centered>
<AvatarList> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </AvatarList> <AvatarList> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </AvatarList>
docs/content/ui/components/badge.mdx
+21 -10
View File
@@ -4,7 +4,7 @@ summary: A badge is a small count and labeling component used to add extra infor
description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context. description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
related: [/ui/components/status, /ui/components/tag] related: [/ui/components/status, /ui/components/tag]
--- ---
import BadgesList from '@ui/BadgesList.astro'; import BadgeList from '@ui/BadgeList.astro';
import Example from '@components/Example.astro'; import Example from '@components/Example.astro';
import Badge from '@ui/Badge.astro'; import Badge from '@ui/Badge.astro';
import site from '@data/site.json'; import site from '@data/site.json';
@@ -17,9 +17,20 @@ export const colors = Object.entries(site.colors);
The default badges are square and come in the basic set of colors. The default badges are square and come in the basic set of colors.
<Example centered> <Example centered>
<BadgesList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgesList> <BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgeList>
</Example> </Example>
## Badge list
Use the `.badge-list` container whenever you show more than one badge next to each other. It keeps consistent spacing between items and wraps them when there is not enough space.
```html
<div class="badge-list">
<span class="badge">First</span>
<span class="badge">Second</span>
</div>
```
## Headings ## Headings
Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings. Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
@@ -35,7 +46,7 @@ You can use the `-lt` classes to create a light version of the badge. This is us
For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well. For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well.
<Example centered> <Example centered>
{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)} <BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}</BadgeList>
</Example> </Example>
## Pill badges ## Pill badges
@@ -43,13 +54,13 @@ For example you can use the `bg-blue-lt` class to create a light blue badge. If
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text. Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
<Example centered> <Example centered>
{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)} <BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
</Example> </Example>
You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits. You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
<Example centered> <Example centered>
{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)} <BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
</Example> </Example>
## Badges with icons ## Badges with icons
@@ -57,13 +68,13 @@ You can use it to create a pill with numbers, for example, to show the number of
You can use [icons](/ui/components/icon) in badges to make them more visually appealing. The example below demonstrates how to use icons in badges. You can use [icons](/ui/components/icon) in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
<Example centered> <Example centered>
<Badge text="Star" icon="star" /> <Badge text="Heart" icon="heart" /> <Badge text="Check" icon="check" /> <Badge text="X" icon="x" /> <Badge text="Plus" icon="plus" /> <Badge text="Minus" icon="minus" /> <BadgeList><Badge text="Star" icon="star" /> <Badge text="Heart" icon="heart" /> <Badge text="Check" icon="check" /> <Badge text="X" icon="x" /> <Badge text="Plus" icon="plus" /> <Badge text="Minus" icon="minus" /></BadgeList>
</Example> </Example>
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges. You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
<Example centered> <Example centered>
<Badge text="Star" icon-end="arrow-right" /> <Badge text="Heart" icon-end="arrow-right" /> <Badge text="Check" icon-end="arrow-right" /> <Badge text="X" icon-end="arrow-right" /> <Badge text="Plus" icon-end="arrow-right" /> <Badge text="Minus" icon-end="arrow-right" /> <BadgeList><Badge text="Star" icon-end="arrow-right" /> <Badge text="Heart" icon-end="arrow-right" /> <Badge text="Check" icon-end="arrow-right" /> <Badge text="X" icon-end="arrow-right" /> <Badge text="Plus" icon-end="arrow-right" /> <Badge text="Minus" icon-end="arrow-right" /></BadgeList>
</Example> </Example>
## Links ## Links
@@ -71,7 +82,7 @@ You can also use an icon on the right side of the badge. The example below demon
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable. Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
<Example centered> <Example centered>
<a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a> <BadgeList><a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a></BadgeList>
</Example> </Example>
## Button with badge ## Button with badge
@@ -81,7 +92,7 @@ Badges can be used as parts of links or [buttons](/ui/components/button) to prov
If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button. If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
<Example centered> <Example centered>
<button type="button" class="btn"> Notifications <Badge text="2" color="red" class="ms-2" /> </button> <button type="button" class="btn"> Inbox <Badge text="4" color="red" class="badge-notification" /> </button> <button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification" /> </button> <div class="btn-list"> <button type="button" class="btn"> Notifications <Badge text="2" color="red" class="ms-2" /> </button> <button type="button" class="btn"> Inbox <Badge text="4" color="red" class="badge-notification" /> </button> <button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification" /> </button> </div>
</Example> </Example>
## Animated badges ## Animated badges
@@ -97,7 +108,7 @@ You can use the `.badge-blink` class to create a blinking effect. This class wil
Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above. Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
<Example centered vertical> <Example centered vertical>
<div> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </div> <BadgeList> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </BadgeList>
</Example> </Example>
docs/content/ui/components/button.mdx
+17 -17
View File
@@ -14,7 +14,7 @@ import CodeDocs from '@components/CodeDocs.astro';
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention. As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
<Example centered> <Example centered>
<a href="#" class="btn" role="button">Link</a> <button class="btn">Button</button> <input type="button" class="btn" value="Input" /> <input type="submit" class="btn" value="Submit" /> <input type="reset" class="btn" value="Reset" /> <div class="btn-list"> <a href="#" class="btn" role="button">Link</a> <button class="btn">Button</button> <input type="button" class="btn" value="Input" /> <input type="submit" class="btn" value="Submit" /> <input type="reset" class="btn" value="Reset" /> </div>
</Example> </Example>
## Default button ## Default button
@@ -30,7 +30,7 @@ The standard button creates a white background and subtle hover animation. It's
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot. Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
<Example separated centered> <Example separated centered>
<a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-secondary">Secondary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-danger">Danger</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-dark">Dark</a> <a href="#" class="btn btn-light">Light</a> <div class="btn-list"> <a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-secondary">Secondary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-danger">Danger</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-dark">Dark</a> <a href="#" class="btn btn-light">Light</a> </div>
</Example> </Example>
## Disabled buttons ## Disabled buttons
@@ -38,7 +38,7 @@ Use the button classes that correspond to the function of your button. The big r
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form. Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
<Example separated centered> <Example separated centered>
<a href="#" class="btn btn-primary disabled">Primary</a> <a href="#" class="btn btn-secondary disabled">Secondary</a> <a href="#" class="btn btn-success disabled">Success</a> <a href="#" class="btn btn-warning disabled">Warning</a> <a href="#" class="btn btn-danger disabled">Danger</a> <a href="#" class="btn btn-info disabled">Info</a> <a href="#" class="btn btn-dark disabled">Dark</a> <a href="#" class="btn btn-light disabled">Light</a> <div class="btn-list"> <a href="#" class="btn btn-primary disabled">Primary</a> <a href="#" class="btn btn-secondary disabled">Secondary</a> <a href="#" class="btn btn-success disabled">Success</a> <a href="#" class="btn btn-warning disabled">Warning</a> <a href="#" class="btn btn-danger disabled">Danger</a> <a href="#" class="btn btn-info disabled">Info</a> <a href="#" class="btn btn-dark disabled">Dark</a> <a href="#" class="btn btn-light disabled">Light</a> </div>
</Example> </Example>
## Color variations ## Color variations
@@ -46,7 +46,7 @@ Make buttons look inactive to show that an action is possible once the user meet
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose. Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
<Example separated centered> <Example separated centered>
<a href="#" class="btn btn-blue">Blue</a> <a href="#" class="btn btn-azure">Azure</a> <a href="#" class="btn btn-indigo">Indigo</a> <a href="#" class="btn btn-purple">Purple</a> <a href="#" class="btn btn-pink">Pink</a> <a href="#" class="btn btn-red">Red</a> <a href="#" class="btn btn-orange">Orange</a> <a href="#" class="btn btn-yellow">Yellow</a> <a href="#" class="btn btn-lime">Lime</a> <a href="#" class="btn btn-green">Green</a> <a href="#" class="btn btn-teal">Teal</a> <a href="#" class="btn btn-cyan">Cyan</a> <div class="btn-list"> <a href="#" class="btn btn-blue">Blue</a> <a href="#" class="btn btn-azure">Azure</a> <a href="#" class="btn btn-indigo">Indigo</a> <a href="#" class="btn btn-purple">Purple</a> <a href="#" class="btn btn-pink">Pink</a> <a href="#" class="btn btn-red">Red</a> <a href="#" class="btn btn-orange">Orange</a> <a href="#" class="btn btn-yellow">Yellow</a> <a href="#" class="btn btn-lime">Lime</a> <a href="#" class="btn btn-green">Green</a> <a href="#" class="btn btn-teal">Teal</a> <a href="#" class="btn btn-cyan">Cyan</a> </div>
</Example> </Example>
## Ghost buttons ## Ghost buttons
@@ -54,7 +54,7 @@ Choose the right color for your button to make it go well with your design and d
Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time. Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
<Example separated vertical> <Example separated vertical>
<a href="#" class="btn btn-ghost-primary">Primary</a> <a href="#" class="btn btn-ghost-secondary">Secondary</a> <a href="#" class="btn btn-ghost-success">Success</a> <a href="#" class="btn btn-ghost-warning">Warning</a> <a href="#" class="btn btn-ghost-danger">Danger</a> <a href="#" class="btn btn-ghost-info">Info</a> <a href="#" class="btn btn-ghost-dark">Dark</a> <div class="p-2 bg-dark"> <a href="#" class="btn btn-ghost-light">Light</a> </div> <div class="btn-list"> <a href="#" class="btn btn-ghost-primary">Primary</a> <a href="#" class="btn btn-ghost-secondary">Secondary</a> <a href="#" class="btn btn-ghost-success">Success</a> <a href="#" class="btn btn-ghost-warning">Warning</a> <a href="#" class="btn btn-ghost-danger">Danger</a> <a href="#" class="btn btn-ghost-info">Info</a> <a href="#" class="btn btn-ghost-dark">Dark</a> <div class="p-2 bg-dark"> <a href="#" class="btn btn-ghost-light">Light</a> </div> </div>
</Example> </Example>
## Square buttons ## Square buttons
@@ -78,7 +78,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action. Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
<Example centered> <Example centered>
<a href="#" class="btn btn-outline-primary">Primary</a> <a href="#" class="btn btn-outline-secondary">Secondary</a> <a href="#" class="btn btn-outline-success">Success</a> <a href="#" class="btn btn-outline-warning">Warning</a> <a href="#" class="btn btn-outline-danger">Danger</a> <a href="#" class="btn btn-outline-info">Info</a> <a href="#" class="btn btn-outline-dark">Dark</a> <a href="#" class="btn btn-outline-light">Light</a> <div class="btn-list"> <a href="#" class="btn btn-outline-primary">Primary</a> <a href="#" class="btn btn-outline-secondary">Secondary</a> <a href="#" class="btn btn-outline-success">Success</a> <a href="#" class="btn btn-outline-warning">Warning</a> <a href="#" class="btn btn-outline-danger">Danger</a> <a href="#" class="btn btn-outline-info">Info</a> <a href="#" class="btn btn-outline-dark">Dark</a> <a href="#" class="btn btn-outline-light">Light</a> </div>
</Example> </Example>
## Button size ## Button size
@@ -86,11 +86,11 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions. Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
<Example centered> <Example centered>
<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-lg">Large button</button> <div class="btn-list"> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-lg">Large button</button> </div>
</Example> </Example>
<Example centered> <Example centered>
<button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-sm">Small button</button> <div class="btn-list"> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-sm">Small button</button> </div>
</Example> </Example>
## Buttons with icons ## Buttons with icons
@@ -100,7 +100,7 @@ Label your button with text and add an icon to communicate the action and make i
See all icons at [tabler.io/icons](https://tabler.io/icons). See all icons at [tabler.io/icons](https://tabler.io/icons).
<Example centered> <Example centered>
<button type="button" class="btn"> <Icon name="upload" /> Upload </button> <button type="button" class="btn btn-warning"> <Icon name="heart" /> I like </button> <button type="button" class="btn btn-success"> <Icon name="check" /> I agree </button> <button type="button" class="btn btn-primary"> <Icon name="plus" /> More </button> <button type="button" class="btn btn-danger"> <Icon name="link" /> Link </button> <button type="button" class="btn btn-info"> <Icon name="message" /> Comment </button> <div class="btn-list"> <button type="button" class="btn"> <Icon name="upload" /> Upload </button> <button type="button" class="btn btn-warning"> <Icon name="heart" /> I like </button> <button type="button" class="btn btn-success"> <Icon name="check" /> I agree </button> <button type="button" class="btn btn-primary"> <Icon name="plus" /> More </button> <button type="button" class="btn btn-danger"> <Icon name="link" /> Link </button> <button type="button" class="btn btn-info"> <Icon name="message" /> Comment </button> </div>
</Example> </Example>
## Social buttons ## Social buttons
@@ -108,7 +108,7 @@ See all icons at [tabler.io/icons](https://tabler.io/icons).
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website. You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
<Example separated centered hideCode> <Example separated centered hideCode>
<a href="#" class="btn btn-facebook"> <Icon name="brand-facebook" /> Facebook </a> <a href="#" class="btn btn-twitter"> <Icon name="brand-twitter" /> Twitter </a> <a href="#" class="btn btn-google"> <Icon name="brand-google" /> Google </a> <a href="#" class="btn btn-youtube"> <Icon name="brand-youtube" /> Youtube </a> <a href="#" class="btn btn-vimeo"> <Icon name="brand-vimeo" /> Vimeo </a> <a href="#" class="btn btn-dribbble"> <Icon name="brand-dribbble" /> Dribbble </a> <a href="#" class="btn btn-github"> <Icon name="brand-github" /> Github </a> <a href="#" class="btn btn-instagram"> <Icon name="brand-instagram" /> Instagram </a> <a href="#" class="btn btn-pinterest"> <Icon name="brand-pinterest" /> Pinterest </a> <a href="#" class="btn btn-vk"> <Icon name="brand-vk" /> VK </a> <a href="#" class="btn btn-rss"> <Icon name="brand-rss" /> RSS </a> <a href="#" class="btn btn-flickr"> <Icon name="brand-flickr" /> Flickr </a> <a href="#" class="btn btn-bitbucket"> <Icon name="brand-bitbucket" /> Bitbucket </a> <a href="#" class="btn btn-tabler"> <Icon name="brand-tabler" /> Tabler </a> <div class="btn-list"> <a href="#" class="btn btn-facebook"> <Icon name="brand-facebook" /> Facebook </a> <a href="#" class="btn btn-twitter"> <Icon name="brand-twitter" /> Twitter </a> <a href="#" class="btn btn-google"> <Icon name="brand-google" /> Google </a> <a href="#" class="btn btn-youtube"> <Icon name="brand-youtube" /> Youtube </a> <a href="#" class="btn btn-vimeo"> <Icon name="brand-vimeo" /> Vimeo </a> <a href="#" class="btn btn-dribbble"> <Icon name="brand-dribbble" /> Dribbble </a> <a href="#" class="btn btn-github"> <Icon name="brand-github" /> Github </a> <a href="#" class="btn btn-instagram"> <Icon name="brand-instagram" /> Instagram </a> <a href="#" class="btn btn-pinterest"> <Icon name="brand-pinterest" /> Pinterest </a> <a href="#" class="btn btn-vk"> <Icon name="brand-vk" /> VK </a> <a href="#" class="btn btn-rss"> <Icon name="brand-rss" /> RSS </a> <a href="#" class="btn btn-flickr"> <Icon name="brand-flickr" /> Flickr </a> <a href="#" class="btn btn-bitbucket"> <Icon name="brand-bitbucket" /> Bitbucket </a> <a href="#" class="btn btn-tabler"> <Icon name="brand-tabler" /> Tabler </a> </div>
</Example> </Example>
```html ```html
@@ -121,7 +121,7 @@ You can use the icons of popular social networking sites, which users are famili
You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space. You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
<Example separated vertical hideCode> <Example separated vertical hideCode>
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button"> <Icon name="brand-facebook" /> </a> <a href="#" class="btn btn-x btn-icon" aria-label="Button"> <Icon name="brand-x" /> </a> <a href="#" class="btn btn-google btn-icon" aria-label="Button"> <Icon name="brand-google" /> </a> <a href="#" class="btn btn-youtube btn-icon" aria-label="Button"> <Icon name="brand-youtube" /> </a> <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button"> <Icon name="brand-vimeo" /> </a> <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button"> <Icon name="brand-dribbble" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-instagram btn-icon" aria-label="Button"> <Icon name="brand-instagram" /> </a> <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button"> <Icon name="brand-pinterest" /> </a> <a href="#" class="btn btn-vk btn-icon" aria-label="Button"> <Icon name="brand-vk" /> </a> <a href="#" class="btn btn-rss btn-icon" aria-label="Button"> <Icon name="rss" /> </a> <a href="#" class="btn btn-flickr btn-icon" aria-label="Button"> <Icon name="brand-flickr" /> </a> <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button"> <Icon name="brand-bitbucket" /> </a> <a href="#" class="btn btn-tabler btn-icon" aria-label="Button"> <Icon name="brand-tabler" /> </a> <div class="btn-list"> <a href="#" class="btn btn-facebook btn-icon" aria-label="Button"> <Icon name="brand-facebook" /> </a> <a href="#" class="btn btn-x btn-icon" aria-label="Button"> <Icon name="brand-x" /> </a> <a href="#" class="btn btn-google btn-icon" aria-label="Button"> <Icon name="brand-google" /> </a> <a href="#" class="btn btn-youtube btn-icon" aria-label="Button"> <Icon name="brand-youtube" /> </a> <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button"> <Icon name="brand-vimeo" /> </a> <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button"> <Icon name="brand-dribbble" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-instagram btn-icon" aria-label="Button"> <Icon name="brand-instagram" /> </a> <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button"> <Icon name="brand-pinterest" /> </a> <a href="#" class="btn btn-vk btn-icon" aria-label="Button"> <Icon name="brand-vk" /> </a> <a href="#" class="btn btn-rss btn-icon" aria-label="Button"> <Icon name="rss" /> </a> <a href="#" class="btn btn-flickr btn-icon" aria-label="Button"> <Icon name="brand-flickr" /> </a> <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button"> <Icon name="brand-bitbucket" /> </a> <a href="#" class="btn btn-tabler btn-icon" aria-label="Button"> <Icon name="brand-tabler" /> </a> </div>
</Example> </Example>
```html ```html
@@ -135,7 +135,7 @@ You can also add an icon without the name of a social networking site, if you wa
Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users. Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
<Example separated centered hideCode> <Example separated centered hideCode>
<a href="#" class="btn btn-primary btn-icon" aria-label="Button"> <Icon name="activity" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-success btn-icon" aria-label="Button"> <Icon name="bell" /> </a> <a href="#" class="btn btn-warning btn-icon" aria-label="Button"> <Icon name="star" /> </a> <a href="#" class="btn btn-danger btn-icon" aria-label="Button"> <Icon name="trash" /> </a> <a href="#" class="btn btn-purple btn-icon" aria-label="Button"> <Icon name="chart-bar" /> </a> <a href="#" class="btn btn-icon" aria-label="Button"> <Icon name="git-merge" /> </a> <div class="btn-list"> <a href="#" class="btn btn-primary btn-icon" aria-label="Button"> <Icon name="activity" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-success btn-icon" aria-label="Button"> <Icon name="bell" /> </a> <a href="#" class="btn btn-warning btn-icon" aria-label="Button"> <Icon name="star" /> </a> <a href="#" class="btn btn-danger btn-icon" aria-label="Button"> <Icon name="trash" /> </a> <a href="#" class="btn btn-purple btn-icon" aria-label="Button"> <Icon name="chart-bar" /> </a> <a href="#" class="btn btn-icon" aria-label="Button"> <Icon name="git-merge" /> </a> </div>
</Example> </Example>
```html ```html
@@ -149,7 +149,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience. Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
<Example centered hideCode height="260px"> <Example centered hideCode height="260px">
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> Show calendar </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="btn-list"> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> Show calendar </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> </div>
</Example> </Example>
```html ```html
@@ -169,7 +169,7 @@ Create a [dropdown](/ui/components/dropdown) button that will encourage users to
Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished. Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
<Example centered> <Example centered>
<a href="#" class="btn btn-primary btn-loading"> Button </a> <a href="#" class="btn btn-primary btn-loading"> Loading button with loooong content </a> <div class="btn-list"> <a href="#" class="btn btn-primary btn-loading"> Button </a> <a href="#" class="btn btn-primary btn-loading"> Loading button with loooong content </a> </div>
</Example> </Example>
<Example centered> <Example centered>
@@ -217,7 +217,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
Add [badges](/ui/components/badge) to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout. Add [badges](/ui/components/badge) to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
<Example centered> <Example centered>
<a href="#" class="btn"> Notifications <span class="badge ms-2">14</span> </a> <a href="#" class="btn"> Messages <span class="badge ms-2">3</span> </a> <a href="#" class="btn"> Alerts <span class="badge ms-2">7</span> </a> <div class="btn-list"> <a href="#" class="btn"> Notifications <span class="badge ms-2">14</span> </a> <a href="#" class="btn"> Messages <span class="badge ms-2">3</span> </a> <a href="#" class="btn"> Alerts <span class="badge ms-2">7</span> </a> </div>
</Example> </Example>
## Buttons with avatars ## Buttons with avatars
@@ -225,7 +225,7 @@ Add [badges](/ui/components/badge) to buttons to display additional information
Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space. Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
<Example centered> <Example centered>
<a href="#" class="btn"> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg);" ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/002m.jpg); " ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/004f.jpg); " ></span> Avatar </a> <div class="btn-list"> <a href="#" class="btn"> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg);" ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/002m.jpg); " ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/004f.jpg); " ></span> Avatar </a> </div>
</Example> </Example>
## Buttons with animations on hover ## Buttons with animations on hover
@@ -249,7 +249,7 @@ Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs
Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention. Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
<Example centered> <Example centered>
<a href="#" class="btn btn-link">Link button</a> <button type="button" class="btn btn-link">Link button</button> <div class="btn-list"> <a href="#" class="btn btn-link">Link button</a> <button type="button" class="btn btn-link">Link button</button> </div>
</Example> </Example>
## Action buttons ## Action buttons
docs/content/ui/components/placeholder.mdx
+1 -1
View File
@@ -46,7 +46,7 @@ You can use a placeholder that will look like an [avatar](/ui/components/avatar)
You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks. You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
<Example centered> <Example centered>
<div class="avatar avatar-xl placeholder"></div> <div class="avatar avatar-lg placeholder"></div> <div class="avatar placeholder"></div> <div class="avatar avatar-sm placeholder"></div> <div class="avatar avatar-xs placeholder"></div> <div class="avatar-list"> <div class="avatar avatar-xl placeholder"></div> <div class="avatar avatar-lg placeholder"></div> <div class="avatar placeholder"></div> <div class="avatar avatar-sm placeholder"></div> <div class="avatar avatar-xs placeholder"></div> </div>
</Example> </Example>
## Placeholder image ## Placeholder image
docs/content/ui/components/popover.mdx
+1 -1
View File
@@ -20,7 +20,7 @@ To create a default popover use:
Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL. Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
<Example centered> <Example centered>
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" > Popover on top </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover" > Popover on right </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" > Popover on bottom </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover" > Popover on left </button> <div class="btn-list"> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" > Popover on top </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover" > Popover on right </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" > Popover on bottom </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover" > Popover on left </button> </div>
</Example> </Example>
## Popover on hover ## Popover on hover
docs/content/ui/components/spinner.mdx
+2 -2
View File
@@ -51,7 +51,7 @@ Growing spinners also come in a variety of colors to choose from.
Use [buttons](/ui/components/button) with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. Use [buttons](/ui/components/button) with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
<Example centered> <Example centered>
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-danger"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-warning"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-success"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <div class="btn-list"> <a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-danger"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-warning"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-success"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> </div>
</Example> </Example>
## Animated dots ## Animated dots
@@ -65,7 +65,7 @@ Use animated dots to show the loading state of a component. They provide feedbac
Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
<Example centered> <Example centered>
<a href="#" class="btn btn-primary"> Loading<span class="animated-dots"></span> </a> <a href="#" class="btn btn-primary disabled"> Loading<span class="animated-dots"></span> </a> <div class="btn-list"> <a href="#" class="btn btn-primary"> Loading<span class="animated-dots"></span> </a> <a href="#" class="btn btn-primary disabled"> Loading<span class="animated-dots"></span> </a> </div>
</Example> </Example>
## SCSS variables ## SCSS variables
docs/content/ui/components/tag.mdx
+5 -5
View File
@@ -9,7 +9,7 @@ import Example from '@components/Example.astro';
import Flag from '@ui/Flag.astro'; import Flag from '@ui/Flag.astro';
import Icon from '@ui/Icon.astro'; import Icon from '@ui/Icon.astro';
import Payment from '@ui/Payment.astro'; import Payment from '@ui/Payment.astro';
import TagsList from '@ui/TagsList.astro'; import TagList from '@ui/TagList.astro';
import CodeDocs from '@components/CodeDocs.astro'; import CodeDocs from '@components/CodeDocs.astro';
## Overview ## Overview
@@ -35,7 +35,7 @@ Use `.tag-icon` for a leading icon inside a tag. The icon uses compact size and
Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of the tag. These classes keep spacing aligned with tag content. Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of the tag. These classes keep spacing aligned with tag content.
<Example centered> <Example centered>
<TagsList> <span class="tag"> <span class="avatar avatar-xs tag-avatar">AP</span> Alex P. <a href="#" class="btn-close" aria-label="Remove Alex tag"></a> </span> <span class="tag"> <Flag flag="us" size="xxs" class="tag-flag" />United States <a href="#" class="btn-close" aria-label="Remove country tag"></a> </span> <span class="tag"> <Payment provider="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </TagsList> <TagList> <span class="tag"> <span class="avatar avatar-xs tag-avatar">AP</span> Alex P. <a href="#" class="btn-close" aria-label="Remove Alex tag"></a> </span> <span class="tag"> <Flag flag="us" size="xxs" class="tag-flag" />United States <a href="#" class="btn-close" aria-label="Remove country tag"></a> </span> <span class="tag"> <Payment provider="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </TagList>
</Example> </Example>
### With badge ### With badge
@@ -56,12 +56,12 @@ Use `.tag-check` on a checkbox when the tag should be selectable. This variant i
## Examples ## Examples
### Tags list ### Tag list
Use `.tags-list` for groups of tags. It applies consistent spacing and wrapping between items. Use `.tag-list` for groups of tags. It applies consistent spacing and wrapping between items.
<Example centered> <Example centered>
<TagsList> <span class="tag">Alpha <a href="#" class="btn-close" aria-label="Remove alpha tag"></a></span> <span class="tag">Beta <a href="#" class="btn-close" aria-label="Remove beta tag"></a></span> <span class="tag">Gamma <a href="#" class="btn-close" aria-label="Remove gamma tag"></a></span> <span class="tag">Delta <a href="#" class="btn-close" aria-label="Remove delta tag"></a></span> </TagsList> <TagList> <span class="tag">Alpha <a href="#" class="btn-close" aria-label="Remove alpha tag"></a></span> <span class="tag">Beta <a href="#" class="btn-close" aria-label="Remove beta tag"></a></span> <span class="tag">Gamma <a href="#" class="btn-close" aria-label="Remove gamma tag"></a></span> <span class="tag">Delta <a href="#" class="btn-close" aria-label="Remove delta tag"></a></span> </TagList>
</Example> </Example>
## Accessibility ## Accessibility
docs/content/ui/components/tooltip.mdx
+1 -1
View File
@@ -12,7 +12,7 @@ import CodeDocs from '@components/CodeDocs.astro';
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element. Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
<Example> <Example>
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" > Tooltip on top </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" > Tooltip on right </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" > Tooltip on bottom </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" > Tooltip on left </button> <div class="btn-list"> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" > Tooltip on top </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" > Tooltip on right </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" > Tooltip on bottom </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" > Tooltip on left </button> </div>
</Example> </Example>
## Tooltip with HTML ## Tooltip with HTML
preview/pages/all-elements.astro
+15 -12
View File
@@ -12,6 +12,7 @@ import CardBody from '@ui/CardBody.astro'
import CardFooter from '@ui/CardFooter.astro' import CardFooter from '@ui/CardFooter.astro'
import Alert from '@ui/Alert.astro' import Alert from '@ui/Alert.astro'
import Badge from '@ui/Badge.astro' import Badge from '@ui/Badge.astro'
import BadgeList from '@ui/BadgeList.astro'
import Progress from '@ui/Progress.astro' import Progress from '@ui/Progress.astro'
import Select from '@ui/Select.astro' import Select from '@ui/Select.astro'
import Check from '@ui/form/Check.astro' import Check from '@ui/form/Check.astro'
@@ -20,6 +21,7 @@ import Nav from '@ui/Nav.astro'
import Breadcrumb from '@ui/Breadcrumb.astro' import Breadcrumb from '@ui/Breadcrumb.astro'
import Pagination from '@ui/Pagination.astro' import Pagination from '@ui/Pagination.astro'
import Avatar from '@ui/Avatar.astro' import Avatar from '@ui/Avatar.astro'
import AvatarList from '@ui/AvatarList.astro'
import Icon from '@ui/Icon.astro' import Icon from '@ui/Icon.astro'
import Dropdown from '@ui/Dropdown.astro' import Dropdown from '@ui/Dropdown.astro'
import Accordion from '@ui/Accordion.astro' import Accordion from '@ui/Accordion.astro'
@@ -32,6 +34,7 @@ import InputIcon from '@ui/form/InputIcon.astro'
import InputGroup from '@ui/InputGroup.astro' import InputGroup from '@ui/InputGroup.astro'
import Range from '@ui/Range.astro' import Range from '@ui/Range.astro'
import Tag from '@ui/Tag.astro' import Tag from '@ui/Tag.astro'
import TagList from '@ui/TagList.astro'
import Ribbon from '@ui/Ribbon.astro' import Ribbon from '@ui/Ribbon.astro'
import Flag from '@ui/Flag.astro' import Flag from '@ui/Flag.astro'
import Payment from '@ui/Payment.astro' import Payment from '@ui/Payment.astro'
@@ -181,18 +184,18 @@ function greetUser(name) {
<CardHeader title="Badges" /> <CardHeader title="Badges" />
<CardBody> <CardBody>
<div class="space-y"> <div class="space-y">
<div> <BadgeList>
<Badge text="Default" /> <Badge text="Default" />
<Badge text="Primary" color="primary" /> <Badge text="Primary" color="primary" />
<Badge text="Secondary" color="secondary" /> <Badge text="Secondary" color="secondary" />
<Badge text="Success" color="success" /> <Badge text="Success" color="success" />
<Badge text="Warning" color="warning" /> <Badge text="Warning" color="warning" />
<Badge text="Danger" color="danger" /> <Badge text="Danger" color="danger" />
</div> </BadgeList>
<div> <BadgeList>
<Badge text="With Icon" color="primary" icon="star" /> <Badge text="With Icon" color="primary" icon="star" />
<Badge text="Light Badge" color="primary" light /> <Badge text="Light Badge" color="primary" light />
</div> </BadgeList>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
@@ -361,22 +364,22 @@ function greetUser(name) {
<CardHeader title="Avatars" /> <CardHeader title="Avatars" />
<CardBody> <CardBody>
<div class="space-y"> <div class="space-y">
<div> <AvatarList>
<Avatar placeholder="JD" size="sm" /> <Avatar placeholder="JD" size="sm" />
<Avatar placeholder="JS" /> <Avatar placeholder="JS" />
<Avatar placeholder="BJ" size="lg" /> <Avatar placeholder="BJ" size="lg" />
<Avatar placeholder="AB" size="xl" /> <Avatar placeholder="AB" size="xl" />
</div> </AvatarList>
<div> <AvatarList>
<Avatar placeholder="RD" shape="rounded" /> <Avatar placeholder="RD" shape="rounded" />
<Avatar placeholder="PR" color="primary" shape="rounded" /> <Avatar placeholder="PR" color="primary" shape="rounded" />
<Avatar placeholder="SC" color="success" shape="rounded" /> <Avatar placeholder="SC" color="success" shape="rounded" />
</div> </AvatarList>
<div> <AvatarList>
<Avatar icon="user" /> <Avatar icon="user" />
<Avatar icon="star" color="warning" /> <Avatar icon="star" color="warning" />
<Avatar placeholder="ST" status="success" /> <Avatar placeholder="ST" status="success" />
</div> </AvatarList>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
@@ -535,11 +538,11 @@ function greetUser(name) {
<CardHeader title="Tags & Labels" /> <CardHeader title="Tags & Labels" />
<CardBody> <CardBody>
<h4>Tags</h4> <h4>Tags</h4>
<div class="mb-3"> <TagList class="mb-3">
<Tag text="Primary Tag" icon="star" /> <Tag text="Primary Tag" icon="star" />
<Tag text="Success Tag" status="success" /> <Tag text="Success Tag" status="success" />
<Tag text="Warning Tag" status="warning" /> <Tag text="Warning Tag" status="warning" />
</div> </TagList>
<h4>Ribbons</h4> <h4>Ribbons</h4>
<div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;"> <div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;">
preview/pages/badges.astro
+11 -11
View File
@@ -1,7 +1,7 @@
--- ---
// colors = ['default'] + site.colors keys + ['dark', 'light'] // colors = ['default'] + site.colors keys + ['dark', 'light']
import BadgesList from '@ui/BadgesList.astro' import BadgeList from '@ui/BadgeList.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro' import Icon from '@ui/Icon.astro'
import ButtonList from '@ui/ButtonList.astro' import ButtonList from '@ui/ButtonList.astro'
@@ -40,7 +40,7 @@ const sizes = ['sm', 'md', 'lg']
<div class="space-y"> <div class="space-y">
{ {
sizes.map((size) => ( sizes.map((size) => (
<BadgesList> <BadgeList>
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span> <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}> <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
<Icon name="check" /> Left icon <Icon name="check" /> Left icon
@@ -52,7 +52,7 @@ const sizes = ['sm', 'md', 'lg']
<span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}> <span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
<Icon name="star" type="filled" /> <Icon name="star" type="filled" />
</span> </span>
</BadgesList> </BadgeList>
)) ))
} }
</div> </div>
@@ -106,9 +106,9 @@ const sizes = ['sm', 'md', 'lg']
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Basic badges</CardTitle> <CardTitle>Basic badges</CardTitle>
<BadgesList> <BadgeList>
{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)} {colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
</BadgesList> </BadgeList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -116,9 +116,9 @@ const sizes = ['sm', 'md', 'lg']
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Light badges</CardTitle> <CardTitle>Light badges</CardTitle>
<BadgesList> <BadgeList>
{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)} {colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
</BadgesList> </BadgeList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -126,9 +126,9 @@ const sizes = ['sm', 'md', 'lg']
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Outline badges</CardTitle> <CardTitle>Outline badges</CardTitle>
<BadgesList> <BadgeList>
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)} {colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
</BadgesList> </BadgeList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -136,7 +136,7 @@ const sizes = ['sm', 'md', 'lg']
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Badges with icons</CardTitle> <CardTitle>Badges with icons</CardTitle>
<BadgesList> <BadgeList>
{ {
colors.map((color) => ( colors.map((color) => (
<span class={`badge bg-${color} text-${color}-fg`}> <span class={`badge bg-${color} text-${color}-fg`}>
@@ -145,7 +145,7 @@ const sizes = ['sm', 'md', 'lg']
</span> </span>
)) ))
} }
</BadgesList> </BadgeList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
preview/pages/form-layout.astro
+3 -2
View File
@@ -1,6 +1,7 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro' import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import InputIcon from '@ui/form/InputIcon.astro' import InputIcon from '@ui/form/InputIcon.astro'
import Check from '@ui/form/Check.astro' import Check from '@ui/form/Check.astro'
import Icon from '@ui/Icon.astro' import Icon from '@ui/Icon.astro'
@@ -191,10 +192,10 @@ const countries = flags as { name: string }[]
</div> </div>
</FormGroup> </FormGroup>
</div> </div>
<div class="text-end"> <ButtonList class="justify-content-end">
<Button text="Cancel" /> <Button text="Cancel" />
<Button color="primary" text="Save Changes" /> <Button color="primary" text="Save Changes" />
</div> </ButtonList>
</div> </div>
</form> </form>
</CardBody> </CardBody>
preview/pages/job-listing.astro
+3 -2
View File
@@ -3,6 +3,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro' import Icon from '@ui/Icon.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import Avatar from '@ui/Avatar.astro' import Avatar from '@ui/Avatar.astro'
import BadgeList from '@ui/BadgeList.astro'
import Check from '@ui/form/Check.astro' import Check from '@ui/form/Check.astro'
import jobsData from '@data/jobs.json' import jobsData from '@data/jobs.json'
@@ -127,13 +128,13 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
</div> </div>
</div> </div>
<div class="col-md-auto"> <div class="col-md-auto">
<div class="mt-3 badges"> <BadgeList class="mt-3">
{job.tags.map((tag) => ( {job.tags.map((tag) => (
<a href="#" class="badge badge-outline text-secondary fw-normal badge-pill"> <a href="#" class="badge badge-outline text-secondary fw-normal badge-pill">
{tag} {tag}
</a> </a>
))} ))}
</div> </BadgeList>
</div> </div>
</div> </div>
</div> </div>
preview/pages/logs.astro
+3 -4
View File
@@ -1,6 +1,7 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Badge from '@ui/Badge.astro' import Badge from '@ui/Badge.astro'
import BadgeList from '@ui/BadgeList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardFooter from '@ui/CardFooter.astro' import CardFooter from '@ui/CardFooter.astro'
@@ -48,14 +49,12 @@ import { site } from '@shared/lib/site'
</div> </div>
<h4>Log Levels</h4> <h4>Log Levels</h4>
<div> <BadgeList class="mb-2">
<div class="mb-2">
<Badge text="INFO" color="success" /> <Badge text="INFO" color="success" />
<Badge text="WARNING" color="warning" /> <Badge text="WARNING" color="warning" />
<Badge text="ERROR" color="danger" /> <Badge text="ERROR" color="danger" />
<Badge text="DEBUG" color="secondary" /> <Badge text="DEBUG" color="secondary" />
</div> </BadgeList>
</div>
</CardBody> </CardBody>
<CardFooter> <CardFooter>
<h4>Log Source</h4> <h4>Log Source</h4>
preview/pages/offcanvas.astro
+3
View File
@@ -1,6 +1,7 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { ucFirst as capitalize } from '@shared/lib/string-format' import { ucFirst as capitalize } from '@shared/lib/string-format'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Offcanvas from '@ui/Offcanvas.astro' import Offcanvas from '@ui/Offcanvas.astro'
@@ -13,6 +14,7 @@ const directions = ['start', 'end', 'top', 'bottom'] as const
<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas"> <DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas">
<Card> <Card>
<CardBody> <CardBody>
<ButtonList>
{ {
directions.map((direction) => ( directions.map((direction) => (
<a class="btn" data-bs-toggle="offcanvas" href={`#offcanvas${capitalize(direction)}`} role="button" aria-controls={`offcanvas${capitalize(direction)}`}> <a class="btn" data-bs-toggle="offcanvas" href={`#offcanvas${capitalize(direction)}`} role="button" aria-controls={`offcanvas${capitalize(direction)}`}>
@@ -20,6 +22,7 @@ const directions = ['start', 'end', 'top', 'bottom'] as const
</a> </a>
)) ))
} }
</ButtonList>
</CardBody> </CardBody>
</Card> </Card>
preview/pages/tags.astro
+17 -17
View File
@@ -1,7 +1,7 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Tag from '@ui/Tag.astro' import Tag from '@ui/Tag.astro'
import TagsList from '@ui/TagsList.astro' import TagList from '@ui/TagList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
@@ -26,9 +26,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Default tags</CardTitle>
<TagsList> <TagList>
{range(1, 14).map((i) => <Tag text={`Label ${i}`} />)} {range(1, 14).map((i) => <Tag text={`Label ${i}`} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -37,9 +37,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with flag</CardTitle> <CardTitle>Tags with flag</CardTitle>
<TagsList> <TagList>
{flags9.map((country) => <Tag text={country.name} flag={country.flag} />)} {flags9.map((country) => <Tag text={country.name} flag={country.flag} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -48,9 +48,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with icon</CardTitle> <CardTitle>Tags with icon</CardTitle>
<TagsList> <TagList>
{tagIcons.map((icon) => <Tag text={icon} icon={icon} />)} {tagIcons.map((icon) => <Tag text={icon} icon={icon} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -59,9 +59,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with avatar</CardTitle> <CardTitle>Tags with avatar</CardTitle>
<TagsList> <TagList>
{people8.map((person) => <Tag text={person.full_name} person={person} />)} {people8.map((person) => <Tag text={person.full_name} person={person} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -70,9 +70,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with status</CardTitle> <CardTitle>Tags with status</CardTitle>
<TagsList> <TagList>
{colors.map((color) => <Tag text={color.title} status={color.class} />)} {colors.map((color) => <Tag text={color.title} status={color.class} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -81,9 +81,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with legend</CardTitle> <CardTitle>Tags with legend</CardTitle>
<TagsList> <TagList>
{colors.map((color) => <Tag text={color.title} legend={color.class} />)} {colors.map((color) => <Tag text={color.title} legend={color.class} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -92,10 +92,10 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Default tags</CardTitle>
<TagsList> <TagList>
{range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)} {range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)}
{range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)} {range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
@@ -104,9 +104,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Default tags</CardTitle>
<TagsList> <TagList>
{range(1, 12).map((i) => <Tag text="Label" badge={i} />)} {range(1, 12).map((i) => <Tag text="Label" badge={i} />)}
</TagsList> </TagList>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
shared/components/cards/Card.astro
+1 -1
View File
@@ -156,7 +156,7 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
Go somewhere Go somewhere
</a> </a>
) : footerButtons ? ( ) : footerButtons ? (
<div class="d-flex"> <div class="btn-list">
<a href="#" class="btn btn-link"> <a href="#" class="btn btn-link">
Cancel Cancel
</a> </a>
shared/ui/AdvancedTable.astro
+3 -3
View File
@@ -1,5 +1,5 @@
--- ---
import BadgesList from './BadgesList.astro' import BadgeList from './BadgeList.astro'
import Icon from './Icon.astro' import Icon from './Icon.astro'
import { formatLongDate } from '@shared/lib/date-format' import { formatLongDate } from '@shared/lib/date-format'
import { randomItem, randomDate } from '@shared/lib/pseudo-random' import { randomItem, randomDate } from '@shared/lib/pseudo-random'
@@ -124,11 +124,11 @@ const sortKeys = headers.map((header) => header['data-sort'])
<td class={requireIndex(headers, 2)['data-sort']}>{status === 'Active' ? <span class="badge bg-success-lt">Active</span> : status === 'Inactive' ? <span class="badge bg-danger-lt">Inactive</span> : <span class="badge">Requested</span>}</td> <td class={requireIndex(headers, 2)['data-sort']}>{status === 'Active' ? <span class="badge bg-success-lt">Active</span> : status === 'Inactive' ? <span class="badge bg-danger-lt">Inactive</span> : <span class="badge">Requested</span>}</td>
<td class={requireIndex(headers, 3)['data-sort']}>{date}</td> <td class={requireIndex(headers, 3)['data-sort']}>{date}</td>
<td class={requireIndex(headers, 4)['data-sort']}> <td class={requireIndex(headers, 4)['data-sort']}>
<BadgesList> <BadgeList>
{itemTags.map((tag) => ( {itemTags.map((tag) => (
<span class="badge">{tag}</span> <span class="badge">{tag}</span>
))} ))}
</BadgesList> </BadgeList>
</td> </td>
<td class={`${requireIndex(headers, 5)['data-sort']} py-0`}> <td class={`${requireIndex(headers, 5)['data-sort']} py-0`}>
<span class="on-unchecked">{category}</span> <span class="on-unchecked">{category}</span>
shared/ui/BadgesList.astro → shared/ui/BadgeList.astro
+2 -2
View File
@@ -1,5 +1,5 @@
--- ---
// Badges list container (.badges-list). // Badge list container (.badge-list).
interface Props { interface Props {
class?: string class?: string
@@ -8,6 +8,6 @@ interface Props {
const { class: className } = Astro.props const { class: className } = Astro.props
--- ---
<div class:list={['badges-list', className]}> <div class:list={['badge-list', className]}>
<slot /> <slot />
</div> </div>
shared/ui/TagsList.astro → shared/ui/TagList.astro
+2 -2
View File
@@ -1,5 +1,5 @@
--- ---
// Tags list container (.tags-list). // Tag list container (.tag-list).
interface Props { interface Props {
class?: string class?: string
@@ -8,6 +8,6 @@ interface Props {
const { class: className } = Astro.props const { class: className } = Astro.props
--- ---
<div class:list={['tags-list', className]}> <div class:list={['tag-list', className]}>
<slot /> <slot />
</div> </div>