@sinchsmb/ui-kit/dist/types/components/BadgeGroup/BadgeGroup.d.ts

UI kit for SinchSMB frontend

/// <reference types="react" />
import { SimpleBadgeGroupProps } from './components/SimpleBadgeGroup/SimpleBadgeGroup';
import { TruncatedBadgeGroupProps } from './components/TruncatedBadgeGroup/TruncatedBadgeGroup';
export type BadgeGroupProps = {
    /** Allows to hide some badges if space isn't enough */
    truncated?: boolean;
} & ((SimpleBadgeGroupProps & {
    truncated?: false;
}) | (TruncatedBadgeGroupProps & {
    truncated: true;
}));
/**
 * The component allows grouping together several badges
 *
 * Also, it allows hiding some badges if space isn't enough
 *
 * Simple mode
 *
 * ```tsx
 * import { BadgeGroup, Badge } from 'ui-kit';
 *
 * <BadgeGroup>
 *   <Badge>Item 0</Badge>
 *   <Badge>Item 1</Badge>
 * </BadgeGroup>
 * ```
 *
 * With truncation
 *
 * ```tsx
 * import { BadgeGroup, Badge } from 'ui-kit';
 *
 * <BadgeGroup truncated moreButtonLabel="Show more tags" onMoreButtonClick={() => do.something()}>
 *   <Badge>Item 0</Badge>
 *   <Badge>Item 1</Badge>
 * </BadgeGroup>
 * ```
 */
export declare const BadgeGroup: (props: BadgeGroupProps) => JSX.Element;