> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling & Data Attributes

> The data-* attributes and CSS styling tokens for <dkl-discount-badge>

This is the shared reference for `<dkl-discount-badge>` — the `data-*` attributes that drive
its behaviour and the `--dkl-badge-*` tokens that style it. The [app
block](/components/discount-badge/app-block) settings map onto these; on a [web component](/components/discount-badge/web-component)
you set them directly.

<Note>
  **Using this reference with the app block**

  When you place the [**DK: Discount Badge** app block](/components/discount-badge/app-block), it
  renders its own `<dkl-discount-badge>` and writes these values for you — so what applies depends
  on the kind of override:

  **Data attributes — No:**
  The block sets every `data-*` itself, from its App block settings and the resolved discount. Adding `data-*` to your own markup has no effect on a block instance; they're the configuration surface for the [web component](/components/discount-badge/web-component) only. To change block behaviour, use its [settings](/components/discount-badge/app-block).

  **CSS styling tokens — Yes:**
  They're CSS custom properties that inherit through to the host, so they style a block exactly like a web component. The block's colour / radius / spacing / font pickers just write the matching tokens into a scoped `<style>` rule for you. Any token **not** exposed as a setting you can still set yourself from your own CSS — `:root`, the embed's **Custom CSS** field, or a rule targeting the block.

  This component is **light-DOM, host-only** — the host element *is* the badge. There's no shadow DOM, so there are **no CSS parts**: style the host element directly (`dkl-discount-badge { … }`).
</Note>

<Tip>
  **Token precedence.** A token the block writes from a chosen setting is scoped to the block's id (`#dkl-badge-   {block.id}`), which is more specific than a `:root` rule — so to override *that* token, either change the editor
  setting or match the specificity (target the block element). Tokens the block leaves unset fall back to your CSS or
  the built-in default as normal.
</Tip>

## Data attributes

All optional — the carrier (or your own Liquid) supplies them. Set one to override.

<ParamField body="data-discount-type" type="&#x22;percentage&#x22; | &#x22;fixed&#x22; | &#x22;highest&#x22;" default="percentage">
  Which amount to show — the percent, the cents, or **whichever saves more**. `highest` is
  computed against the current variant price (`percent × price` vs the fixed cents); ties
  favour the percentage, and a missing side falls back to the other.
</ParamField>

<ParamField body="data-amount-percent" type="number (decimal percent)" default="carrier (max_reward_percent)">
  The percentage amount (rounded for display).
</ParamField>

<ParamField body="data-amount-cents" type="int (cents)" default="carrier (max_reward_cents)">
  The fixed amount (money-formatted).
</ParamField>

<ParamField body="data-base-price-cents" type="int (cents)" default="carrier (the variant's price)">
  The variant price; drives the `highest` comparison (recomputed on variant change).
</ParamField>

<ParamField body="data-money-format" type="string" default="carrier (shop.money_format)">
  Money format for the `fixed` amount.
</ParamField>

<ParamField body="data-label" type="string" default="Save up to [amount]">
  Label template; `[amount]` is replaced with the formatted amount.
</ParamField>

<Info>
  The component **hides** the host only when it can compute that there's nothing to show and
  there's no server-rendered text already. Without the `data-*` attributes it leaves the
  server text alone.
</Info>

## CSS styling tokens

<Frame caption="CSS styling tokens for the DKL Discount Badge component">
  <img src="https://mintcdn.com/discountkit/qPmR0fAEpbjKUETr/images/components/dkl-discount-badge-css-tokens.jpg?fit=max&auto=format&n=qPmR0fAEpbjKUETr&q=85&s=6248a5aa1d81e8a99c23961c6ebc26fb" alt="Image highlighting the CSS styling tokens for the DKL Discount Badge component" width="1600" height="1032" data-path="images/components/dkl-discount-badge-css-tokens.jpg" />
</Frame>

The stylesheet (loaded site-wide by the embed) styles the **host element** directly — the
host *is* the badge, so target `dkl-discount-badge { … }` (there are no CSS parts). Set any
token above the element — `:root`, the embed's Custom CSS, an inline `style`, or the block's
scoped rule.

<ParamField body="--dkl-badge-background" default="var(--dkl-color-accent)">
  Badge background.
</ParamField>

<ParamField body="--dkl-badge-color" default="#ffffff">
  Badge text.
</ParamField>

<ParamField body="--dkl-badge-radius" default="var(--dkl-radius)">
  Badge corners.
</ParamField>

<ParamField body="--dkl-badge-padding-block" default="0.175rem">
  Vertical padding.
</ParamField>

<ParamField body="--dkl-badge-padding-inline" default="0.5rem">
  Horizontal padding.
</ParamField>

<ParamField body="--dkl-badge-font-size" default="0.75rem">
  Badge text size.
</ParamField>

<ParamField body="--dkl-badge-font-weight" default="600">
  Badge text weight.
</ParamField>

The **DK: Discount Badge** block exposes Background color, Text color, Corner radius,
Vertical / Horizontal padding, Font size, and Font weight settings that feed the matching
tokens via a scoped `<style>` rule.

## Examples

```html Restyle a single badge inline theme={null}
<dkl-discount-badge
  style="
    --dkl-badge-background: #111;
    --dkl-badge-color: #fff;
    --dkl-badge-radius: 999px;
    --dkl-badge-font-size: 0.85rem;
    --dkl-badge-font-weight: 700;
  "
></dkl-discount-badge>
```

```css Style the host via :root tokens theme={null}
:root {
  --dkl-badge-background: #111;
  --dkl-badge-color: #fff;
  --dkl-badge-radius: 999px;
}
```

```css Target the host element directly theme={null}
dkl-discount-badge {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="App block" icon="puzzle-piece" href="/components/discount-badge/app-block">
    Configure these via theme-editor settings.
  </Card>

  <Card title="Web Components" icon="code" href="/components/discount-badge/web-component">
    Set these directly on the tag.
  </Card>
</CardGroup>