Pill

Pill is a flexible component that can be used to display interactive and non-interactive information within a variety of contexts.

Examples

MSSQL

Contents

UsageAPIs

Usage

Pill is a visual abstraction that can represent different semantic meanings.

Do

  • Keep the content concise (single words, terms, etc.)
  • Use to display metadata

Don't

  • Use as a replacement for a button
  • Include an icon without text

APIs

PillSize

compact
number
regular
number
large
number

PillVariant

standard
number
outlined
number
colored
number
themedStandard
number

IPillProps

ariaHidden
boolean
Whether the Pill should apply aria-hidden={true} to hide the element from screen readers. This should only be done if some other element is responsible for reading the contents of the Pill.
ariaLabel
string
Optional aria label to pass to the pill. Will default to the this.props.children if this.props.children is a string.
className
string
Optional className to emit on the root element
color
IColor
Background color for the pill Ignored unless variant is set to Colored If variant is set to Colored and this is not provided, we'll render as Standard and emit a warning to the console
containsCountfalse
boolean
Optional boolean to set if the pill is displaying a count of something
contentClassName
string
Optional className to emit on the content
excludeFocusZone
boolean
The element has been exluded from a current focusZone by default.
excludeTabStop
boolean
The element should not be tabable but still should be able to receieve focus.
iconProps
IIconProps
Props used to render the pill icon If a filled visual is provided as well, we only render the visual and will emit a warning to the console Using with Size = PillSize.Compact will result in no icon being rendered and a warning being printed to the console
id
string
Id for the root element
onBlur
(event: React.FocusEvent<HTMLElement>) => void
Callback to handle blur events
onClick
(event?: React.MouseEvent<HTMLDivElement>) => void
onClick handler for the pill itself
onFocus
(event: React.FocusEvent<HTMLDivElement>) => void
onFocus handler for the pill itself
onMouseEnter
(event: React.MouseEvent<HTMLDivElement>) => void
onMouseEnter for root element
onMouseLeave
(event: React.MouseEvent<HTMLDivElement>) => void
onMouseLeave for root element
onRemoveClick
(event: React.MouseEvent<HTMLDivElement>) => void
Renders the remove button if provided Handler to remove the pill
onRenderFilledVisual
() => JSX.Element
Custom rendering function for left-aligned visuals Using with size = PillSize.Compact will trigger a warning in the console and will not render anything
removeButtonTabIndex
number
Explicit tab index overrides any other focus-zone / focus-group controlled indexing for the remove button
sizeRegular
PillSize
Use of iconProps, onRemoveClick, or onRenderFilledVisual in conjunction with Compact will result in those elements not being rendered and a warning being printed to the console
tabIndex
number
Explicit tab index overrides any other focus-zone / focus-group controlled indexing
variantStandard
PillVariant
If this is set to Colored and color is not provided, we'll render as Standard and emit a warning to the console

PillGroupOverflow

clip0
number
wrap1
number
fade2
number

IPillGroupProps

className
string
Optional class name to add to the pill group.
onMouseEnter
(event: React.MouseEvent<HTMLDivElement>) => void
Optional mouse-enter handler
onMouseLeave
(event: React.MouseEvent<HTMLDivElement>) => void
Optional mouse-leave handler
overflowPillGroupOverflow.clip
PillGroupOverflow
Set the overflow behavior.