# Interaction

Active, hover and focus states for interactive elements.

Section: foundations
Docs: https://nebula.kaluza.com/foundations/interaction

---

## Overview
Interactive elements show their state through focus, hover and active styles, so people can tell what they can use and where they are on the page.

## Focus Ring
Focus rings should be used for all interactive elements, such as a [CTA Button](/components/cta-button/) or [Text Link](/components/text-link/). This will clearly identify
elements as interactive to keyboard users.

```tsx
<PrimaryCTAButton>Plant a Tree</PrimaryCTAButton>
```