106 lines
1.8 KiB
Markdown
106 lines
1.8 KiB
Markdown
# daisyUI Documentation - Link Component
|
|
|
|
Link adds the missing underline style to links.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **link** - Adds underline
|
|
- **link-hover** - Only shows underline on hover
|
|
- **link-neutral** - neutral color
|
|
- **link-primary** - primary color
|
|
- **link-secondary** - secondary color
|
|
- **link-accent** - accent color
|
|
- **link-success** - success color
|
|
- **link-info** - info color
|
|
- **link-warning** - warning color
|
|
- **link-error** - error color
|
|
|
|
## Examples
|
|
|
|
### Basic Link
|
|
|
|
```html
|
|
<a class="link">Click me</a>
|
|
```
|
|
|
|
### Link with Tailwind Reset
|
|
|
|
Tailwind CSS resets the style of links by default.
|
|
Add "link" class to make it look like a again.
|
|
|
|
```html
|
|
<p>
|
|
Tailwind CSS resets the style of links by default.
|
|
<br />
|
|
Add "link" class to make it look like a
|
|
<a class="link">normal link</a>
|
|
again.
|
|
</p>
|
|
```
|
|
|
|
### Link Colors
|
|
|
|
#### Primary color
|
|
|
|
```html
|
|
<a class="link link-primary">Click me</a>
|
|
```
|
|
|
|
#### Secondary color
|
|
|
|
```html
|
|
<a class="link link-secondary">Click me</a>
|
|
```
|
|
|
|
#### Accent color
|
|
|
|
```html
|
|
<a class="link link-accent">Click me</a>
|
|
```
|
|
|
|
#### Neutral color
|
|
|
|
```html
|
|
<a class="link link-neutral">Click me</a>
|
|
```
|
|
|
|
#### Success color
|
|
|
|
```html
|
|
<a class="link link-success">Click me</a>
|
|
```
|
|
|
|
#### Info color
|
|
|
|
```html
|
|
<a class="link link-info">Click me</a>
|
|
```
|
|
|
|
#### Warning color
|
|
|
|
```html
|
|
<a class="link link-warning">Click me</a>
|
|
```
|
|
|
|
#### Error color
|
|
|
|
```html
|
|
<a class="link link-error">Click me</a>
|
|
```
|
|
|
|
### Show Underline Only on Hover
|
|
|
|
```html
|
|
<a class="link link-hover">Click me</a>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Adds underline style to links
|
|
- Multiple color variants
|
|
- Hover-only underline option
|
|
- Works with Tailwind CSS reset styles
|
|
|
|
This component is useful for creating styled links that have proper underline styling and can be customized with different colors.
|