---
meta:
  nav: Variants
  title: Variants
  description: Understanding and utilizing the variant prop in Vuetify
  keywords: variant, Vuetify
related:
  - /components/buttons/
  - /components/lists/
---

# Variants

Variants are a powerful feature that allows you to customize the appearance and behavior of components.

<PageFeatures />

<PromotedEntry />

## Sheet components

Sheet components in Vuetify offer different stylistic variants to make it easy to fit them into different design contexts. Below is a table summarizing the six available variants.

| Variant    | Description                                                |
|------------|------------------------------------------------------------|
| `elevated` | Provides a subtle box-shadow for a depth effect.           |
| `flat`     | No shadow or depth, lies flat against the content.         |
| `tonal`    | Adjusts the tone of the component's background.            |
| `outlined` | Adds a colored border around the component.                |
| `text`     | Removes the background color and elevation.                |
| `plain`    | No styles, offering a clean slate for customization.       |

## Field components

Field components in Vuetify offer a comprehensive set of stylistic variants to elevate your forms and input fields. Whether you're into Material Design or love to experiment, there's a variant for every design challenge.

| Variant        | Description   |
| -------------- | ------------- |
| `underlined`   | A Material Design 2 variant with a focus underline. |
| `outlined`     | Adds a border that lifts the label when the field is focused. |
| `filled`       | The input field features a filled background. |
| `solo`         | Stands alone with subtle elevation for a distinct look. |
| `solo-inverted`| Similar to `solo` but inverts input color when focused. |
| `solo-filled`  | Like `solo`, but with a filled background. |
| `plain`        | Strips away most styles for an almost blank slate. |
