# ε Label

Element: Words and iconography used widely across the design system to provide context to objects. Almost everywhere you see text or an icon we will use a label.

[Styleguide Link](https://zpl.io/aRRypYz)

[Kitchen Sink - Prototype](https://www.figma.com/proto/tl9bzV6Fos0qgkJELXcAuk/Kitchen-Sink?page-id=1147%3A103\&node-id=2265%3A214624\&viewport=317%2C48%2C0.77\&scaling=min-zoom\&starting-point-node-id=2262%3A202675\&show-proto-sidebar=1)

* Parent: Multiple
* Child: [Icon](https://able.bucca.com/core/overview/icon), [Text Style](https://able.bucca.com/overview/styles/typography)

### Properties

**Size** - The general size of the Labels content in respect to other Labels. These sizes are provided by the Theme's Typographical Scale with icon sizes to proportionally match those line heights.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FNmtj0a2SFq4hnI7gBy79%2FSize.png?alt=media&#x26;token=9cd4382a-6e2f-4675-887c-d3058ce32a0f" alt=""><figcaption></figcaption></figure>

**Type** - The options for arrangement of the type to icon within the Label.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F5yp3PfjxPMENcvT5A5n4%2FType.png?alt=media&#x26;token=ceaf486a-d591-4972-b902-7fd11f95baad" alt=""><figcaption></figcaption></figure>

* Text (only)
* Icon (only)
* Icon Left (of text)
* Icon Right (of text)
* Icon Top (of text)
* Icon Bottom (of text)

### Why

We use Labels to maintain consistency within the design system for Type and Icon sizes and the spacing between those objects. A change made to the spacing at this level can dramatically change the look of the entire app.