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.
INFO
Since v2.2.0, the bundle only provide contextual color variants. It is located at dist/theme-light.css and dist/theme-dark.css files. If the component style and color doesn't suit to your needs, you can customize it using the component's CSS variables or use the provided SASS mixins.
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 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
As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-chip for better customization.
.md-chip {
--md-chip-border-width: thin;
--md-chip-font-weight: 400;
--md-chip-disabled-bg: #{$disabled-bg};
--md-chip-disabled-border-color: #{$disabled-border-color};
--md-chip-disabled-color: #{colors.$gray-800};
--md-chip-disabled-icon-color: #{colors.$gray-500};
--md-chip-disabled-opacity: 0.5;
--md-chip-readonly-opacity: 0.65;
--md-chip-gutter-x: #{vars.$padding-sm};
--md-chip-gutter-y: #{vars.$padding-xs};
--md-chip-avatar-margin-left: #{(vars.$padding-sm + 0.175) * -1};
--md-chip-avatar-margin-right: #{vars.$padding-sm};
--md-chip-icon-margin-left: #{vars.$padding-sm * -1};
--md-chip-icon-margin-right: #{vars.$padding-sm};
--md-chip-dismiss-btn-margin-left: #{vars.$padding-sm};
--md-chip-dismiss-btn-margin-right: #{(vars.$padding-sm + 0.25) * -1};
--md-chip-sm-border-radius: #{vars.$radius-sm};
--md-chip-sm-font-size: #{vars.$chip-sm-font-size};
--md-chip-sm-height: #{vars.$chip-sm-height};
--md-chip-sm-padding-x: 0.75rem;
--md-chip-sm-padding-y: 0;
--md-chip-md-border-radius: #{vars.$radius-md};
--md-chip-md-font-size: #{vars.$chip-md-font-size};
--md-chip-md-height: #{vars.$chip-md-height};
--md-chip-md-padding-x: #{vars.$padding-md};
--md-chip-md-padding-y: 0;
--md-chip-lg-border-radius: #{vars.$radius-lg};
--md-chip-lg-font-size: #{vars.$chip-lg-font-size};
--md-chip-lg-height: #{vars.$chip-lg-height};
--md-chip-lg-padding-x: #{vars.$padding-lg};
--md-chip-lg-padding-y: 0;
--md-chip-bg: #{$bg-color};
--md-chip-color: #{$color};
--md-chip-border-color: #{$border-color};
--md-chip-icon-color: #{$icon-color};
--md-chip-hover-bg: #{$hover-bg};
--md-chip-hover-color: #{$hover-color};
--md-chip-hover-border-color: #{$hover-border};
--md-chip-active-bg: #{$active-bg};
--md-chip-active-color: #{$active-color};
--md-chip-active-border-color: #{$active-bg};
--md-chip-active-icon-color: #{$active-icon-color};
--md-chip-focus-border-color: #{$focus-border};
--md-chip-focus-shadow-color: #{$box-shadow-color};
}SASS mixins
Sometimes, simply creating a new chip color can be overwhelming, as there are too many CSS variables to modify. For cases like this, Vue MDBootstrap provides several SASS mixins to help you create new chip style variants.
use 'vue-mdbootstrap/scss/mixins/chip';
@include chip.make-default-variant-light($name, $color);
@include chip.make-outline-variant-light($name, $color);use 'vue-mdbootstrap/scss/mixins/chip';
@include chip.make-default-variant-dark($name, $color);
@include chip.make-outline-variant-dark($name, $color);