hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

Destination Badge Group

Destination badge group is used to display multiple destination badges and collapse them to a single line, if necessary.

#

import { DestinationBadgeGroup, DestinationBadge } from "@hightouchio/ui";

function Example() {
return (
<DestinationBadgeGroup>
<DestinationBadge>Contact</DestinationBadge>
<DestinationBadge>Lead</DestinationBadge>
<DestinationBadge>Account</DestinationBadge>
<DestinationBadge>Company</DestinationBadge>
<DestinationBadge>Message</DestinationBadge>
<DestinationBadge>Table</DestinationBadge>
<DestinationBadge>Segment</DestinationBadge>
<DestinationBadge>Mirror</DestinationBadge>
<DestinationBadge>Feed</DestinationBadge>
<DestinationBadge>Entity</DestinationBadge>
<DestinationBadge>Transaction</DestinationBadge>
</DestinationBadgeGroup>
);
}

#

#

DestinationBadgeGroup truncates badges by default and renders them in one line. Badges that didn't fit can be viewed by clicking the "+1" button at the end of the badge group.

import { DestinationBadgeGroup, DestinationBadge } from "@hightouchio/ui";

function Example() {
return (
<DestinationBadgeGroup>
<DestinationBadge>Contact</DestinationBadge>
<DestinationBadge>Lead</DestinationBadge>
<DestinationBadge>Account</DestinationBadge>
<DestinationBadge>Company</DestinationBadge>
<DestinationBadge>Message</DestinationBadge>
<DestinationBadge>Table</DestinationBadge>
<DestinationBadge>Segment</DestinationBadge>
<DestinationBadge>Mirror</DestinationBadge>
<DestinationBadge>Feed</DestinationBadge>
<DestinationBadge>Entity</DestinationBadge>
<DestinationBadge>Transaction</DestinationBadge>
</DestinationBadgeGroup>
);
}

#

When badge group is not constrained by the parent container and has the ability to show all badges without truncation, pass truncate={false} to disable it.

import { DestinationBadgeGroup, DestinationBadge } from "@hightouchio/ui";

function Example() {
return (
<DestinationBadgeGroup truncate={false}>
<DestinationBadge>Contact</DestinationBadge>
<DestinationBadge>Lead</DestinationBadge>
<DestinationBadge>Account</DestinationBadge>
<DestinationBadge>Company</DestinationBadge>
<DestinationBadge>Message</DestinationBadge>
<DestinationBadge>Table</DestinationBadge>
<DestinationBadge>Segment</DestinationBadge>
<DestinationBadge>Mirror</DestinationBadge>
<DestinationBadge>Feed</DestinationBadge>
<DestinationBadge>Entity</DestinationBadge>
<DestinationBadge>Transaction</DestinationBadge>
</DestinationBadgeGroup>
);
}

#

#

  • Only use this component for displaying groups of destination badges.

#

Inherits margin props.

NameDefaultDescription
truncatetrueboolean

Display as much destination badges as possible on a single row and show the rest in a popover.

children

—

ReactNode

Destination badges.

On this page