# gds-divider

**Class**: `GdsDivider`

**Tag**: `<gds-divider>`


## Properties

> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `string \| undefined` | `-` | Controls the color property of the divider. Supports all the color tokens from the design system.  You can apply color like this:  ```html <gds-divider color="interactive"></gds-divider> ``` |
| `size` | `string \| undefined` | `-` | Controls the size property of the divider. Supports all the space tokens from the design system.  You can apply size like this:  ```html <gds-divider size="2xl"></gds-divider> ```  The above example will apply the size style of 2xl. |
| `opacity` | `string \| undefined` | `-` | Controls the opacity property of the divider. Supports all the opacity tokens from the design system.  You can apply opacity like this:  ```html <gds-divider opacity="0.2"></gds-divider> ``` The above example will apply the opacity style of base400. |
| `role` | `string \| null` | `-` | Use the role attribute primarily if you only want the divider to be a visual element.  ```html <!-- This divider will not be announced as a separator or thematic break --> <gds-divider role="presentation"></gds-divider> ``` |
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |