Banquette
On this page

Tag

Tags can be used to highlight important keywords or status for better readability.

Basic

Basic tags and variants.

    Closable

    You can make the tags closable via the closable prop. When the close icon is clicked, a @close event is emitted.

      Props

      Method Description Default
      href
      		The URL to redirect to when the tag is clicked.
      If defined, the root component will be a <a> instead of a <span>.      		 null
      target
      		Define the "target" attribute of the root element.
      Only applicable if href is defined and thus the root element is a <a>.      		 null
      closable
      		If true, a close icon is added that emits a close event when clicked. false

      Slots

      Name Description
      default

      The content of the tag.

      Props: none

      Events

      Name Description
      close

      Emitted when the close icon the tag is clicked.

      Usage 
      function onClose(): void {
    console.log('Hide tag');
}

      <bt-tag @close="onClose"></bt-tag>

      Theming

      Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

      Variables

      Variable Default Comment
      fontFamily var(--bt-font-family-base) -
      fontSize var(--bt-font-size-sm) -
      fontWeight var(--bt-font-weight-normal) -
      textColor var(--bt-color-primary) -
      textHoverColor var(--tag-text-color) -
      backgroundColor var(--bt-color-primary-50) -
      backgroundHoverColor var(--tag-close-background-hover-color) -
      borderColor var(--bt-color-primary-150) -
      borderHoverColor var(--tag-background-hover-color) -
      borderRadius var(--bt-border-radius-base) -
      borderWidth var(--bt-border-width-base) -
      borderStyle var(--bt-border-style-base) -
      closeFillColor currentColor -
      closeFillHoverColor currentColor -
      closeBackgroundHoverColor var(--bt-color-primary-100) -

      Selectors

      Name Comment Pseudo classes Attributes Combinable with
      root The root container.
      -
      -
      		 -
      togglesWrapper The full width container the toggles.
      -
      -
      		 -
      togglesWrapperLeft Same as togglesWrapper but restricted to the left layout.
      -
      -
      		 -
      togglesWrapperRight Same as togglesWrapper but restricted to the right layout.
      -
      -
      		 -
      toggles The inline container of the toggles.
      -
      -
      		 -
      toggle The individual container of each toggle.
      		togglesWrapperLeft, togglesWrapperRight
      toggleFocused The focused toggle.
      -
      -
      		 togglesWrapperLeft, togglesWrapperRight
      toggleIcon Targets svg icons inside the toggles.
      -
      -
      		 togglesWrapperLeft, togglesWrapperRight
      content The container holding the content of the current tab.
      -
      -
      		 -
      focusIndicator The little line that goes below the toggle of the current tab.
      -
      -
      		 -

      Examples:

      cssSelectors: {
    togglesWrapper: {
        background: '...'
    },
    'togglesWrapperLeft, togglesWrapperRight': {
        background: '...'
    },
    'toggle:hover': {
        color: '...'
    },
    'togglesWrapperLeft toggle:hover': {
        background: '...'
    }
}