# Label

A text label with macOS typography styles.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="label/Basic" />

## Import [#import]

```rust
use maccn::{LabelStyle, MacLabel};
```

## Usage [#usage]

```rust
MacLabel::new("title")
    .style(LabelStyle::Title1)
    .child("Hello World");
```

## Variants [#variants]

<ComponentPreview name="label/Variants" />

```rust
use gpui::div;
use maccn::{LabelStyle, MacLabel};

div()
    .flex()
    .flex_col()
    .gap_1()
    .child(MacLabel::new("l-lt").style(LabelStyle::LargeTitle).child("Large Title"))
    .child(MacLabel::new("l-t1").style(LabelStyle::Title1).child("Title 1"))
    .child(MacLabel::new("l-t2").style(LabelStyle::Title2).child("Title 2"))
    .child(MacLabel::new("l-t3").style(LabelStyle::Title3).child("Title 3"))
    .child(MacLabel::new("l-hl").style(LabelStyle::Headline).child("Headline"))
    .child(MacLabel::new("l-body").style(LabelStyle::Body).child("Body"))
    .child(MacLabel::new("l-co").style(LabelStyle::Callout).child("Callout"))
    .child(MacLabel::new("l-sh").style(LabelStyle::Subheadline).child("Subheadline"))
    .child(MacLabel::new("l-fn").style(LabelStyle::Footnote).child("Footnote"))
    .child(MacLabel::new("l-c1").style(LabelStyle::Caption1).child("Caption 1"))
    .child(MacLabel::new("l-c2").style(LabelStyle::Caption2).child("Caption 2"))
```

## API [#api]

### Props [#props]

| Prop        | Type         | Default |
| ----------- | ------------ | ------- |
| `style`     | `LabelStyle` | `Body`  |
| `secondary` | `bool`       | `false` |

### LabelStyle [#labelstyle]

| Variant       | Size | Weight |
| ------------- | ---- | ------ |
| `LargeTitle`  | 26px | Normal |
| `Title1`      | 22px | Normal |
| `Title2`      | 17px | Normal |
| `Title3`      | 15px | Normal |
| `Headline`    | 13px | Bold   |
| `Body`        | 13px | Normal |
| `Callout`     | 12px | Normal |
| `Subheadline` | 11px | Normal |
| `Footnote`    | 10px | Normal |
| `Caption1`    | 10px | Normal |
| `Caption2`    | 10px | Normal |

### Traits [#traits]

| Trait           | Description                 |
| --------------- | --------------------------- |
| `Styled`        | Set color, alignment, etc.  |
| `ParentElement` | Add content via `.child()`. |