---
title: "Hanko"
description: "A square seal inspired by Japanese stamps for brands and editorial accents. It takes one to four characters, tilts −2° and uses the theme's primary color."
kind: component
id: C-024
registry: "hanko"
docs: "https://koten.codehive.com.co/components/hanko"
markdown: "https://koten.codehive.com.co/md/components/hanko.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/hanko.json"
language: en
---

# Hanko · 判子

> Component C-024 in the Koten UI catalog.

A square seal inspired by Japanese stamps for brands and editorial accents. It takes one to four characters, tilts −2° and uses the theme's primary color.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/hanko.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/hanko.json
```

## Files

- `@/components/ui/hanko.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Sizes

Three sizes and one labelled seal; only the last exposes role="img", the rest stay decorative.

```tsx
<Hanko size="sm">典</Hanko>
<Hanko size="md">古典</Hanko>
<Hanko size="lg">古典紋</Hanko>
<Hanko label="Koten seal" size="md">典</Hanko>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `size` | `sm \| md \| lg` | `md` | Controls the square and the character size; the −2° rotation stays. |
| `label` | `string` | `—` | When set, the seal gets role="img" and aria-label; without it, it is decorative. |
| `maxChars` | `number` | `4` | Trims the text; the effective maximum is four characters even if a larger value is passed. |

## Accessibility

- Without a label it is decorative and carries aria-hidden, so it does not clutter the accessibility tree.
- With a label it gets role="img" and aria-label: the visible character is not announced twice.
- Four characters maximum; the seal is not a button, takes no focus and must not carry critical text.

## Sources

- Catalog page: https://koten.codehive.com.co/components/hanko
- Markdown: https://koten.codehive.com.co/md/components/hanko.md
- Repository: https://github.com/codehive-colombia/koten