@sinchsmb/ui-kit
Version:
UI kit for SinchSMB frontend
87 lines (86 loc) • 3.58 kB
TypeScript
/// <reference types="react" />
import { BadgeBlockProps } from './components/BadgeBlock';
import { BadgeButtonProps } from './components/BadgeButton';
import { BadgeLinkProps } from './components/BadgeLink';
import { BadgeType } from './constants';
/** Props for {@link Badge} */
export type BadgeProps = {
/**
* Determines the component modification
* Depending on this, the component can require additional props.
*/
type?: BadgeType;
} & ((BadgeBlockProps & {
type?: BadgeType.Default;
}) | (BadgeButtonProps & {
type: BadgeType.Button;
}) | (BadgeLinkProps & {
type: BadgeType.Link;
}));
/**
* A Badge is a visual indicator for an item's status or numeric values.
*
* ### Interactive
*
* Badges can be represented as `<button>` or as `<a>` elements.
*
* #### Buttons
*
* Badges can be clickable.
*
* <Story id="components-badge--as-button" />
*
* ```tsx
* import { Badge, BadgeType } from 'ui-kit'
*
* <Badge type={BadgeType.Button} onClick={handleBadgeClick}>List</Badge>
* ```
*
* #### Links
*
* Badges can be represented as link.
*
* <Story id="components-badge--as-link" />
*
* ```tsx
* import { Badge, BadgeType } from 'ui-kit'
*
* <Badge type={BadgeType.Link} to="/dashboard">Dashboard</Badge>
* ```
*
* ### Colors
*
* If the color is not specified the Badge has a gray background.
*
* <Story id="components-badge--default" />
*
* Optionally you can set a specific style bypassing the `color` prop with one of the following styles:
* `BadgeColor.Default`, `BadgeColor.Blue`, `BadgeColor.Green`, `BadgeColor.Orange`, `BadgeColor.Red`.
*
* <Story id="components-badge--badges" />
*
* ### Variant
*
* Sometimes using the default colors is not enough. For example, the badges may be less noticeable on gray
* backgrounds. In this case, use the `variant` prop to modify the Badge. You may apply it to any color,
* including the default one.
*
* <Story id="components-badge--bold-badges" />
*
* ### Patterns
*
* We have a number of common patterns for Badge's colors usage.
*
* | Green | Orange | Red | Blue |
* | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
* | <Story id="components-badge-patterns--success" noCanvas /> | <Story id="components-badge-patterns--new" noCanvas /> | <Story id="components-badge-patterns--blocked" noCanvas /> | <Story id="components-badge-patterns--pending" noCanvas /> |
* | <Story id="components-badge-patterns--done" noCanvas /> | <Story id="components-badge-patterns--warning" noCanvas /> | <Story id="components-badge-patterns--expired" noCanvas /> | |
* | <Story id="components-badge-patterns--active" noCanvas /> | | | |
*
* ### Badges with icons
*
* You can add an icon to badge by set `icon` prop.
*
* <Story id="components-badge--icon-badges" />
*/
export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLElement>>;