Tag
You can edit 8 Components for free. Get premium for unlimited access.
...
Figma
The Badge is a customizable component designed to display a small, medium or large badge with different styles and background colors. It is commonly used for indicators like "Success" or "Error".
1. Reference
This component inherits props from the Badge.
2. Type
You can edit the type with the default, success or error parameter.
Image 2.1 : Type default
Image 2.2 : Type success
Image 2.3 : Type error
3. Size
You can edit the size with the lg, md or sm parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
Jetpack Compose
The Badge is a customizable component designed to display a small badge or label with different styles and background colors. It is commonly used for indicators like "New," "Error" or "Success".
1. Reference
This component inherits props from the Badge.
-
2. Type
You can edit the type with the BadgeType.default, BadgeType.error or BadgeType.success parameter.
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.error
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.success
)
3. Size
You can edit the size with the BadgeSize.sm, BadgeSize.md or BadgeSize.lg parameter.
value = "Badge",
size = BadgeSize.sm,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.md,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.default
)
Preview
Preview
Code
// Different types
<Tag>Default</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="success">Success</Tag>
<Tag type="error">Error</Tag>
// Different sizes
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
// With custom text
<Tag text="Custom Text" />
// As a child component
<Tag>Children Text</Tag>Installation
Use this command to install the component in your project.
dynamiclayer add tagUsage
Add this code example to your project to see how the component works.
import Tag from "@/components/ui/Tag"// Different types
<Tag>Default</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="success">Success</Tag>
<Tag type="error">Error</Tag>
// Different sizes
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
// With custom text
<Tag text="Custom Text" />
// As a child component
<Tag>Children Text</Tag>Examples
Size
Preview
Code
// Different types
<Tag>Default</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="success">Success</Tag>
<Tag type="error">Error</Tag>
// Different sizes
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
// With custom text
<Tag text="Custom Text" />
// As a child component
<Tag>Children Text</Tag>Variants
Preview
Code
// Different types
<Tag>Default</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="success">Success</Tag>
<Tag type="error">Error</Tag>
// Different sizes
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
// With custom text
<Tag text="Custom Text" />
// As a child component
<Tag>Children Text</Tag>Mode
Preview
Code
// Different types
<Tag>Default</Tag>
<Tag type="warning">Warning</Tag>
<Tag type="success">Success</Tag>
<Tag type="error">Error</Tag>
// Different sizes
<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>
// With custom text
<Tag text="Custom Text" />
// As a child component
<Tag>Children Text</Tag>Discover more content
You have questions or need help?
You want to try?
Save time and money?