GradientBorder
@stellaria/nebula-webGradientBorderPropsPreview
Props
9| Prop | Type | Default |
|---|---|---|
beam Sends an arc travelling around the ring. It needs the theme's `motion.tier` above `minimal` and at least one edge left in `edges`; failing either, the static gradient ring is what you get. | boolean | false |
children | ReactNode | — |
className Composes with the classes `Box` computes instead of replacing them. | string | — |
component The element it paints. | (ElementType & C) | "div" |
edges Which sides the beam lights, clockwise from the top. Read only while `beam` runs — on a static ring the gradient always goes all the way round. | readonly GradientBorderEdge[] | [1, 2, 3, 4] |
gradient A theme gradient role, or a literal `{ from, to }` pair. With `beam` running it stops painting the ring — the ring drops to the plain border colour and the gradient moves into the travelling arc, which is the only way the arc is visible against it. | { from: ColorExtended; to: ColorExtended; deg?: number; animate?: boolean; } | GradientRole | "brand" |
sequence How the arcs are spaced in time. `"continuous"` chains them back to back over the edges that are lit, so the beam never breaks; `"spaced"` keeps every edge in its own quarter of the cycle, so dropping one leaves a gap rather than closing it up. | GradientBorderSequence | "continuous" |
surface What fills the inside of the ring. `"none"` leaves it transparent, which is what keeps this a ring drawn around existing content rather than a card with a gradient edge. | GradientBorderSurface | "none" |
width Thickness of the ring, as a raw length. | number | 1 |
Also accepts
On top of its own props, this component forwards these groups.