Chip
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Chip component that can be used to display filters or categories.
1. Reference
This component inherits props from the Chip.
2. Amount
You can edit the amount with the true or false parameter
Image 2.1 : Amount false
Image 2.2 : Amount true
3. Size
You can edit the Size with the xs, md, lg paramenters.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
4. State
You can edit the State with the default, active and disabled parameters.
Image 4.1 : State default
Image 4.2 : State active
Image 4.3 : State disabled
SwiftUI
The DLChip component that can be used to display filters or categories.
1. Reference
This component inherits props from the Chip.
-
-
-
2. State
You can edit the state with the .normal or .disabled parameter.
title: "Chip",
isActive: $isChipActive,
state: .normal(count: 0),
size: .lg
)
DLChip(
title: "Chip",
isActive: $isChipActive,
state: .normal(count: 10),
size: .lg
)
DLChip(
title: "Chip",
isActive: $isChipActive,
state: .disabled,
size: .lg
)
DLChip(
title: "Chip",
isActive: $isChipActive1,
state: .normal(count: 0),
size: .lg
)
3. Size
You can edit the size with the .sm, .md or .lg parameter.
title: "Chip",
isActive: $isChipActive,
type: .normal(count: 0),
size: .lg
)
DLChip(
title: "Chip",
isActive: $isChipActive,
type: .normal(count: 0),
size: .md
)
DLChip(
title: "Chip",
isActive: $isChipActive,
type: .normal(count: 0),
size: .sm
)
Jetpack Compose
The Chip component that can be used to display filters or categories.
1. Reference
This component inherits props from the Chip.
-
-
2. State
You can edit the state with the ChipState.default, ChipState.active or ChipState.disabled parameter.
title = "Chip",
size = ChipSize.lg,
state = ChipState.default
)
Chip(
title = "Chip",
count = 10,
size = ChipSize.lg,
state = ChipState.default
)
Chip(
title = "Chip",
size = ChipSize.lg,
state = ChipState.disabled
)
Chip(
title = "Chip",
size = ChipSize.lg,
state = ChipState.active
)
3. Size
You can edit the size with the ChipSize.sm, ChipSize.md or ChipSize.lg parameter.
title = "Chip",
size = ChipSize.lg,
state = ChipState.default
)
Chip(
title = "Chip",
size = ChipSize.md,
state = ChipState.default
)
Chip(
title = "Chip",
size = ChipSize.sm,
state = ChipState.default
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?