# First Component

Add a component to your app and style its state.

Let's add a Bookmark toggle. Press it once to turn it on, then again to turn it off.

If you haven't installed the packages yet, start with [Installation](/docs/vue/installation).

## Create the Component

Create `bookmark-button.vue` next to your app component and render a `Toggle`:

```vue title="bookmark-button.vue"
<script setup lang="ts">
import { Toggle } from "@ui-sdk/vue/toggle"
</script>

<template>
  <Toggle>Bookmark</Toggle>
</template>
```

`Toggle` renders a button. It keeps track of its pressed state, handles Enter and Space, and sets `aria-pressed` for screen readers.

## Use It in Your App

In your app component (`App.vue` here), import and render `BookmarkButton`:

```vue title="App.vue"
<script setup lang="ts">
import BookmarkButton from "./bookmark-button.vue"
</script>

<template>
  <BookmarkButton />
</template>
```

Open your app. You should see a button labeled Bookmark. Next, add styles so you can tell when it is pressed.

## Add Styles

When the toggle is pressed, it has a `data-pressed` attribute. Use that attribute to change its appearance.

With Tailwind CSS configured in your app, add utility classes to `class`. The `data-pressed:` variant applies while the toggle is pressed:

```vue title="bookmark-button.vue"
<script setup lang="ts">
import { Toggle } from "@ui-sdk/vue/toggle"
</script>

<template>
  <Toggle
    class="inline-flex h-8 items-center rounded-md border border-neutral-300 px-3 text-sm font-medium hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-neutral-900 data-pressed:text-white"
  >
    Bookmark
  </Toggle>
</template>
```

Try the styled toggle:

```vue title="first-component.vue"
<script setup lang="ts">
import { Toggle } from "@ui-sdk/vue/toggle"
</script>

<template>
  <Toggle data-variant="outline"> Bookmark </Toggle>
</template>
```

Click Bookmark to turn it on or off. A filled background means it is on. You can also focus the button with Tab and press Enter or Space.

Keep the label the same in both states. `aria-pressed` tells a screen reader whether the toggle is on.

## Keep Going

- [Toggle](/docs/vue/components/toggle) covers disabled states, controlled state, and groups of toggles.
- [Components](/docs/vue/components) lists the other components you can add with the same install.
- [Parts and Composition](/docs/vue/parts-and-composition) shows how to put a component with several parts together.
- [State and Events](/docs/vue/state-and-events) shows how to read changes and control state from your app.
- [Styling and Animation](/docs/vue/styling-and-animation) covers state attributes, CSS variables, and transitions.