zidanecomponents/TabPill
import { … } from 'zidane-ui'ui/src/components/TabPill.tsx
Components#
CountBadgeComponent#
The one count badge. attention is the agent waiting on the user (warn
fill, soft pulse while it lasts); info a quiet count set into its
surface; neutral an extension's own badge.
function CountBadge(props: CountBadgeProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | CountBadgeProps | Component props. |
Returns
ElementTabPillComponent#
Renders a tab in a .zg-segment track. The selected tab is the raised chip, and the close
button shows on hover. A tab is one control for keyboard and assistive tech: Delete or
Backspace on the focused tab closes it, and the close button is out of the tab order.
function TabPill(props: TabPillProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | TabPillProps | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on the wrapping element. | |
| closeAlways? | boolean | false | Show the close button always, not only on hover or focus. |
| closeLabel | string | Accessible name and tooltip of the close button. | |
| keyShortcuts? | string | Keyboard shortcut of the tab, announced through | |
| label | ReactNode | Content of the tab. | |
| leading? | ReactNode | Content before the label, such as a file icon. | |
| lifted? | boolean | Raised without being selected (the pill being dragged). | |
| marker? | ReactNode | Overlay on the close button's corner, such as an unsaved or updated dot. | |
| onAuxClick? | (e: MouseEvent<HTMLButtonElement>) => void | Called on a non-primary click on the tab, such as a middle-click. | |
| onClose | () => void | Called when the close button is clicked, or on Delete or Backspace on the focused tab. | |
| onContextMenu? | (e: MouseEvent<HTMLButtonElement>) => void | Called on a right-click on the tab. | |
| onKeyDown? | (e: KeyboardEvent<HTMLButtonElement>) => void | Called on key down on the tab, before the built-in Delete and Backspace handling. Call
| |
| onSelect | () => void | Called when the tab is clicked. | |
| selected | boolean | Whether this is the current tab. Sets | |
| size? | 'sm' | 'md' | 'md' | Tab height: |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| title? | string | Native tooltip of the tab. | |
| trailing? | ReactNode | Inside the tab (its accessible name includes it): the count badge. |
Interfaces#
CountBadgePropsInterface#
Props for CountBadge.
interface CountBadgePropsTabPillPropsInterface#
Props for TabPill.
interface TabPillPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on the wrapping element. | |
| closeAlways? | boolean | false | Show the close button always, not only on hover or focus. |
| closeLabel | string | Accessible name and tooltip of the close button. | |
| keyShortcuts? | string | Keyboard shortcut of the tab, announced through | |
| label | ReactNode | Content of the tab. | |
| leading? | ReactNode | Content before the label, such as a file icon. | |
| lifted? | boolean | Raised without being selected (the pill being dragged). | |
| marker? | ReactNode | Overlay on the close button's corner, such as an unsaved or updated dot. | |
| onAuxClick? | (e: MouseEvent<HTMLButtonElement>) => void | Called on a non-primary click on the tab, such as a middle-click. | |
| onClose | () => void | Called when the close button is clicked, or on Delete or Backspace on the focused tab. | |
| onContextMenu? | (e: MouseEvent<HTMLButtonElement>) => void | Called on a right-click on the tab. | |
| onKeyDown? | (e: KeyboardEvent<HTMLButtonElement>) => void | Called on key down on the tab, before the built-in Delete and Backspace handling. Call
| |
| onSelect | () => void | Called when the tab is clicked. | |
| selected | boolean | Whether this is the current tab. Sets | |
| size? | 'sm' | 'md' | 'md' | Tab height: |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| title? | string | Native tooltip of the tab. | |
| trailing? | ReactNode | Inside the tab (its accessible name includes it): the count badge. |
Types#
CountToneType#
Look of a CountBadge: attention, info or neutral.
type CountTone = 'attention' | 'info' | 'neutral'