# Components
``` python
p = mk_previewer()
```
## Anchors
The `c-anchor` component styles links with Garden’s typography and color
system.
### Basic Usage
``` python
p(Anchor('Click here', href='#'))
```
### Danger
``` python
p(Anchor('Delete this', href='#', cls='--danger'))
```
### Dark
For use on dark backgrounds.
``` python
p(Div(Anchor('Dark link', href='#', cls='--dark'), style='background:#333; padding:1rem'))
```
## Avatars
Styled avatar images with Garden’s sizing and shape system.
### Basic Usage
An Avatar can contain an image or text
``` python
p(Avatar(Img(src='https://ui-avatars.com/api/?name=John+Doe')))
```
``` python
p(Div(
Avatar(Img(src='https://picsum.photos/200')),
Avatar(AvatarTxt('ZD'), style='background:var(--zd-color-secondary-royal-700)'),
style='display:flex; gap:1rem; align-items:center'
))
```
``` python
print(Avatar(Span('ZD', cls='c-avatar__txt', style='background:--zd-color-secondary-royal-700'), cls='--system'))
```
ZD
### Sizes
Avatars come in extra-small, small, default, and large sizes.
``` python
p(Div(
Avatar(Img(src='https://ui-avatars.com/api/?name=XS'), cls='--xs'),
Avatar(Img(src='https://ui-avatars.com/api/?name=SM'), cls='--sm'),
Avatar(Img(src='https://ui-avatars.com/api/?name=MD')),
Avatar(Img(src='https://ui-avatars.com/api/?name=LG'), cls='--lg')
))
```
### System
Square avatars for system/product icons.
``` python
p(Avatar(Img(src='https://ui-avatars.com/api/?name=SYS'), cls='--system'))
```
### Dark
For use on dark backgrounds.
``` python
p(Div(Avatar(Img(src='https://ui-avatars.com/api/?name=DK'), cls='--dark'), style='background:#333; padding:1rem'))
```
## Buttons
Styled buttons with Garden’s button system.
### Basic Usage
``` python
p(Div(
Btn('Standard'),
Btn('Basic', cls='--basic'),
Btn('Pill', cls='--pill'),
style='display:flex; gap:1rem; align-items:center'
))
```
### Primary
``` python
p(Btn('Primary', cls='--primary'))
```
### Danger
``` python
p(Btn('Delete', cls='--danger'))
```
### Full Width
``` python
p(Btn('Full Width', cls='--full'))
```
### Sizes
``` python
p(Div(Btn('Small', cls='--sm'), Btn('Default'), Btn('Large', cls='--lg'), style='display:flex; gap:1rem; align-items:center'))
```
### Dark
For use on dark backgrounds.
``` python
p(Div(Btn('Dark', cls='--dark'), style='background:#333; padding:1rem'))
```
### Combinations
``` python
p(Div(Btn('Primary Pill', cls='--primary --pill'), Btn('Danger Large', cls='--danger --lg'), style='display:flex; gap:1rem'))
```
## Forms
Garden forms combine inputs with labels, hints, and validation messages
inside a `c-field` container.
### Basic Usage
### Text Input
``` python
p(Field(
FieldLabel('Name', fr='name-id'),
FieldHint('Enter your full name'),
FieldInput(id='name-id', placeholder='John Doe')
))
```
### Textarea
``` python
p(Field(
FieldLabel('Bio', fr='bio-id'),
Textarea(id='bio-id', placeholder='Tell us about yourself')
))
```
### Select
``` python
p(Field(
FieldLabel('Country', fr='country-id'),
Select(Option('USA'), Option('UK'), Option('Canada'), id='country-id')
))
```
### Checkbox
``` python
p(Field(
Checkbox(id='agree-id'),
FieldLabel('I agree to the terms', fr='agree-id'),
FieldHint('Please read carefully')
))
```
### Radio
``` python
p(Div(
Field(Radio(id='opt1', name='options'), FieldLabel('Option 1', fr='opt1')),
Field(Radio(id='opt2', name='options'), FieldLabel('Option 2', fr='opt2')),
Field(Radio(id='opt3', name='options'), FieldLabel('Option 3', fr='opt3'))
))
```
### Validation States
``` python
p(Field(
FieldLabel('Email'), FieldInput(),
FieldMessage('Valid email', cls='--success'),
cls='--success'
))
```
``` python
p(Field(
FieldLabel('Password'), FieldInput(type='password'),
FieldMessage('Password too weak', cls='--warning'),
cls='--warning'
))
```
``` python
p(Field(
FieldLabel('Username'), FieldInput(),
FieldMessage('Username is required', cls='--error'),
cls='--error'
))
```
### Compact and Dark
``` python
p(Field(FieldLabel('Compact'), FieldInput(), cls='--compact'))
```
``` python
p(Div(
Field(FieldLabel('Dark mode'), FieldInput(), cls='--dark'),
style='background:#333; padding:1rem'
))
```
## Tags
Styled tags for badges, pills, and labels using Garden’s tag system.
### Basic Usage
### Shapes
Tags come in default (rounded rectangle), pill, and round shapes.
``` python
p(Div(
Tag('Default'),
Tag('Pill', cls='--pill'),
Tag('R', cls='--round'),
style='display:flex; gap:1rem'
))
```
### Sizes
``` python
p(Div(
Tag('Small', cls='--sm'),
Tag('Default'),
Tag('Large', cls='--lg'),
style='display:flex; gap:1rem; align-items:center'
))
```
### Colors
``` python
p(Div(
Tag('Blue', cls='--blue'),
Tag('Green', cls='--green'),
Tag('Grey', cls='--grey'),
Tag('Kale', cls='--kale'),
Tag('Red', cls='--red'),
Tag('Yellow', cls='--yellow'),
style='display:flex; gap:0.5rem; flex-wrap:wrap'
))
```
### Dark
For use on dark backgrounds.
``` python
p(Div(Tag('Dark', cls='--dark'), style='background:#333; padding:1rem'))
```
### With Avatar
Tags can include an avatar image.
``` python
p(Tag(TagAvatar(src='https://ui-avatars.com/api/?name=JD&size=32'), 'With Avatar'))
```