A tag is a static and actionable component that displays an element's status, key properties, or categories, and allows users to input information for filtering content.

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.

Prop

Type

Default

type

default

success

error

default

size

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.

Prop

Type

Default

type

BadgeType.default

BadgeType.success

BadgeType.error

BadgeType.default

size

BadgeSize.sm

BadgeSize.md

BadgeSize.lg

value

"text"

2. Type

You can edit the type with the BadgeType.default, BadgeType.error or BadgeType.success parameter.

Badge
Badge
Badge
Badge(
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.

Badge
Badge
Badge
Badge(
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

Code

Tag

const DlTag(
  label: 'Tag',
)

Copy

Usage

Add this code example to your project to see how the component works.

const DlTag(
  label: 'Tag',
)

Copy

API Reference

DlTag is a compact token-driven label component with configurable size , mode and semantic type , plus optional left/right icons that inherit the same foreground color as the text.

Prop

Type

Default

label

String

size

mode

light

dark

light

type

defaultType

error

success

warning

defaultType

iconLeft

Widget?

null

iconRight

Widget?

null

key

Key?

null

Examples

Size

Preview

Code

Tag

const Wrap(
  spacing: DlSpacingTokens.p_16,
  runSpacing: DlSpacingTokens.p_16,
  children: [
    DlTag(
      label: 'Tag',
      size: DlTagSize.sm
    ),
    DlTag(
      label: 'Tag',
      size: DlTagSize.md
    ),
    DlTag(
      label: 'Tag',
      size: DlTagSize.lg
    ),
  ],
)

Copy

Variants

Preview

Code

Tag

Error

Warning

Success

const Wrap(
  spacing: DlSpacingTokens.p_16,
  runSpacing: DlSpacingTokens.p_16,
  children: [
    DlTag(
      label: 'Tag',
      type: DlTagType.defaultType,
      mode: DlTagMode.light,
    ),
    DlTag(
      label: 'Error',
      type: DlTagType.error,
      mode: DlTagMode.light,
    ),
    DlTag(
      label: 'Warning',
      type: DlTagType.warning,
      mode: DlTagMode.light,
    ),
    DlTag(
      label: 'Success',
      type: DlTagType.success,
      mode: DlTagMode.light,
    ),
  ],
)

Copy

Mode

Preview

Code

Tag

Error

Warning

Success

const Wrap(
  spacing: DlSpacingTokens.p_16,
  runSpacing: DlSpacingTokens.p_16,
  children: [
    DlTag(
      label: 'Tag',
      type: DlTagType.defaultType,
      mode: DlTagMode.dark,
    ),
    DlTag(
      label: 'Error',
      type: DlTagType.error,
      mode: DlTagMode.dark,
    ),
    DlTag(
      label: 'Warning',
      type: DlTagType.warning,
      mode: DlTagMode.dark,
    ),
    DlTag(
      label: 'Success',
      type: DlTagType.success,
      mode: DlTagMode.dark,
    ),
  ],
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version