> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vistaly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Labels

> Labels are designed to be a flexible tagging system for your data. Use them to annotate and filter data.

export const VideoGIF = ({src, className = '', ...otherProps}) => <Video src={src} autoPlay={true} muted={true} loop={true} controls={false} playsInline={true} className={className} style={{
  boxShadow: "0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.06)"
}} {...otherProps} />;

export const Video = ({src, autoPlay = false, muted = false, loop = false, playsInline = true, controls = true, className = '', ...otherProps}) => <video src={`https://cdn.vistaly.com/kb${src}`} autoPlay={autoPlay} muted={muted} loop={loop} playsInline={playsInline} controls={controls} className={className} {...otherProps} />;

export const Image = ({src, alt, caption}) => <figure>
    <img src={`https://cdn.vistaly.com/kb${src}`} {...alt ? {
  alt
} : {}} />
    {caption && <figcaption class="image-caption">{caption}</figcaption>}
  </figure>;

## Adding Lables

Create labels by either adding them inline or through the labels settings page.

<Image src="/documentation/core-concepts/labels/navigation.png" alt="Navigate to Labels" />

<Note>To bulk remove, update, and change label color. Visit the settings page</Note>

<VideoGIF src="/documentation/core-concepts/labels/label-crud.mp4" />

> Warning: Be careful when removing a label. Removing labels also removes all references to that label.

## Filtering

The Tree view can be filtered by using the label filter.

<Image src="/documentation/core-concepts/labels/filters.png" alt="Using filters with labels" />

See the [filter documentation](/documentation/core-concepts/filters) to see more advanced use cases.