Chip
BsChip is a component which is used to convey small pieces of information to create arbitrary items, like categories or tags, help enter information, make selections, filter content, or trigger actions.
Overview
BsChip can be used like a badge to create arbitrary items, like categories or tags, show options for a specific context like make selections, filter content or triggers action.
Updated on v2.0.0TIP
Any MDBootstrap Color variants and Material Color variants can be applied to the color property.
States
<bs-chip> component has states: active, disabled and readonly. Use their respective property to enable the state.
Element Type
The <bs-chip> component by default renders a <div> element. However, you can also render as <a> element by providing href attribute value.
Style Variants
You can style the <bs-chip> to your own preference or use a style variant based on Google Material Design 3 specifications.
Default
Rounded Pill
You can create chip with rounded-pill style by defining the pill property explicitly.
Outlined
You can create chip with outlined style by defining the outlined property explicitly.
TIP
outlined and pill property can be combined to create another style variants.
Sizes
<bs-chip> can be set in different size: sm (small), or lg (large).
Icon
<bs-chip> can have an icon inside it. The icon can be positioned on the left side (before text) or on the right side (after text) using icon-position property.
Use icon property to display an icon and sets the value to a valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon variant.
Beside using suffix, property icon-variant can also be used to set the icon variant. Valid values are: outlined (default), rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Suffix will take precedence over icon-variant property.
Additionally custom icon can also be displayed using the icon slot and the icon property must be omitted.
INFO
Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.
Rotating an icon
Additionally, you can also rotate the icon to some extent. Use icon-flip property or icon-rotation property to rotate the icon, but do not use both property together.
Animating an icon
<bs-chip> also has built-in animations for icon, which are: spin and pulse. Example below, demonstrate the built-in icon animation and the use of icon slot.
Avatar
Chip's avatar can be enabled by using the img-src property and additionally you can define the img-circle property explicitly to create circle shape avatar style.
Adjusting avatar size
Avatar size can be adjusted to match the chip height by eliminating the margin around the avatar. This can be achieved by defining the img-padding-off property explicitly.
Dropdown Menus
<bs-chip> component can also be placed inside <bs-dropdown-menu> component.
Click Events
<bs-chip> component can also received click event like html element.
Dismissible Chip
Use the dismissible property to dismiss any <bs-chip>. This will add a close X button. Additionally you can listen to the close event to execute a task after the chip has been dismissed.
Controlling dismissible chip
Use the v-model directive to create two-way data bindings on the model-value property as in v-model="showDismissibleChip". This is useful to control the dismissible chip, because when the chip is closed, the variable will be updated.
CSS Variables
Added since v2.0.0--md-chip-border-radius: #{$chip-border-radius};
--md-chip-border-width: 0;
--md-chip-font-weight: 400;
--md-chip-gutter-x: 0.5rem;
--md-chip-gutter-y: 0.25rem;
--md-chip-padding-x: 1rem;
--md-chip-padding-y: 0;
--md-chip-avatar-margin-left: -0.675rem;
--md-chip-avatar-margin-right: 0.5rem;
--md-chip-icon-margin-left: -0.5rem;
--md-chip-icon-margin-right: 0.5rem;
--md-chip-dismiss-btn-margin-left: 0.5rem;
--md-chip-dismiss-btn-margin-right: -0.75rem;
--md-chip-disabled-bg: #{lighten($gray-500, 15%)};
--md-chip-disabled-border-color: #{lighten($gray-500, 8%)};
--md-chip-disabled-color: #{$gray-900};
--md-chip-disabled-opacity: 0.5;
--md-chip-readonly-opacity: 0.65;
--md-chip-bg: #{$chip-bg};
--md-chip-border-color: #{$chip-border};
--md-chip-color: #{$chip-color};
--md-chip-icon-color: #{$chip-icon-color};
--md-chip-active-bg: #{$chip-active-bg};
--md-chip-active-border-color: #{$chip-active-border};
--md-chip-active-color: #{$chip-active-color};
--md-chip-active-icon-color: #{$chip-active-icon};
--md-chip-hover-bg: #{$chip-hover-bg};
--md-chip-hover-border-color: #{$chip-hover-border};
--md-chip-hover-color: #{$chip-hover-color};
--md-chip-focus-border-color: #{$chip-active-border};
--md-chip-focus-shadow-color: #{$chip-focus-box-shadow-rgb};
--md-chip-height: 2rem;
--md-chip-sm-height: 1.56rem;
--md-chip-sm-font-size: 85%;
--md-chip-lg-height: 3rem;
--md-chip-lg-font-size: 120%;