# Core/Anchor - Usage

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `React.ReactNode` | Yes | `--` | The label text to display in the anchor. Anchor labels should be one or two words, using title case (Tab Label). Labels should be less than 12 characters, with a maximum of 32 characters. |
| `href` | `string` | No | `--` | The href attribute of the anchor. |
| `isActive` | `boolean` | No | `--` | Whether the anchor is active. |
| `isDisabled` | `boolean` | No | `--` | Whether the anchor is disabled. |
| `as` | `As` | No | `--` | The underlying element rendered by the anchor. Defaults to `a`. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

## Usage

```tsx
import { Anchor } from '@cribl/capra-core';

// Basic usage
<Anchor href="/dashboard">Dashboard</Anchor>

// Active state
<Anchor href="/settings" isActive>Settings</Anchor>

// Disabled state
<Anchor href="/admin" isDisabled>Admin</Anchor>

// Polymorphic - render as button
<Anchor as="button" onClick={handleClick}>Action</Anchor>
```

## Polymorphic Component

The Anchor component supports the `as` prop, allowing it to be rendered as different HTML elements or custom components. This is particularly useful when integrating with routing libraries like React Router.

```tsx
import { Link } from 'react-router-dom';

// Using with React Router
<Anchor as={Link} to="/dashboard">Dashboard</Anchor>
```