# SubComponents

### Bar

To render the progress bar in the Meter.

### Bar API

<table><thead><tr><th>Props</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><code>percentage</code></td><td><code>number</code></td><td>✅ </td></tr><tr><td><code>variant</code></td><td><code>'default' | 'primary' | 'scaled'</code></td><td>❌</td></tr><tr><td><code>scales</code></td><td><p></p><pre class="language-typescript"><code class="lang-typescript">{
  safe?: number;
  warning?: number;
  danger?: number;
};
</code></pre></td><td>❌</td></tr></tbody></table>

<details>

<summary>percentage</summary>

A value between 1-100 that is passed to represent the current value.

</details>

### Scales

The scales prop is an object passed to represent limits by changing the progress color. By default, if you pass the `'scaled'` variant, the object limits will be like this:

```tsx
const defaultScales = {
    safe: 50,
    warning: 75,
    danger: 100,
 };
```

### Label

{% hint style="danger" %}
The label subcomponent **does not** extend the SDS label component. &#x20;
{% endhint %}

### Label API

This subcomponent extends the native label props.

| Props    | Type        | Required |
| -------- | ----------- | -------- |
| children | `ReactNode` | ✅        |

<details>

<summary>children</summary>

The renderd string or structure passed as child.

</details>