Importimport { BorderBeam } from 'antd'; |
Versionsupported since 6.4.0 |
Importimport { BorderBeam } from 'antd'; |
Versionsupported since 6.4.0 |
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| children | Decorated content | ReactNode | - | 6.4.0 | × |
| color | Beam color configuration. Supports a single color string or gradient stops. percent uses the 0 ~ 100 input range and BorderBeam reserves tail space for the transparent fade | string | { color: string; percent: number }[] | - | 6.4.0 | × |
| outset | Outset distance of the beam layer from the container edge. Set to 0 for clipped containers | number | string | - | 6.4.0 | × |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| lineWidth | Border width of base components | number | 1 |
BorderBeam treats the beam as a decorative effect. When prefers-reduced-motion: reduce is active, the beam effect is hidden.
percent mean in color?percent represents the authored stop position and accepts values from 0 to 100. BorderBeam maps those stops into the visible beam segment and reserves the trailing area for transparent fade-out so the moving tail stays visible.
BorderBeam not working?BorderBeam needs to resolve the actual DOM node from children and insert the beam layer into that node. Make sure the wrapped content is a native DOM element, or a React component that correctly forwards its ref to a DOM element. Otherwise BorderBeam cannot locate the real container and the beam cannot be rendered.
The beam layer is positioned with position: absolute, so the resolved DOM node also needs to provide a positioning context. In most cases, set position: relative on the wrapped element. BorderBeam does not inspect or patch the child positioning style for you.
For performance reasons, whether children can host the beam and its positioning information are resolved during initialization, and are not continuously updated when the child structure or positioning styles change later.
BorderBeam reads the computed border-radius from the actual container during initialization. This works best for a single-container child such as Card; for more complex child trees, set the radius on the actual container root for a more deterministic result.
For performance reasons, the radius is not continuously measured after the initial calculation. Later radius changes caused by size, ancestor styles, or internal child state are not guaranteed to resync automatically. The running beam may still apply internal motion smoothing.
For example:
const radius = 24;<BorderBeam><Card style={{ borderRadius: radius }} /></BorderBeam>;