# Star Border

> Light rays that run along the edges of a box.

Source: https://ngwr.dev/bits/star-border  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrStarBorder } from 'ngwr/bits/star-border';

@Component({ imports: [WrStarBorder] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/star-border';
```

## Playground

```angular-html
<wr-star-border mode="infinite" rays="mirror" [speed]="6">
  Star border
</wr-star-border>
```

```angular-ts
import { Component } from '@angular/core';

import { WrStarBorder } from 'ngwr/bits/star-border';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrStarBorder],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## As a button

Use it as an attribute on a button or a link.

```angular-html
<button wr-star-border mode="hover" rays="single" type="button">
  Hover me
</button>
```

```angular-ts
import { Component } from '@angular/core';

import { WrStarBorder } from 'ngwr/bits/star-border';

/**
 * As a button
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-as-a-button-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-as-a-button-example.html',
  imports: [WrStarBorder],
})
export class NgwrTheAngularUiLibraryForSignalFormsAsAButtonExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `color` | Ray colour. Unset, it follows the theme. | `string \| null` | `null` |
| `speed` | Seconds per ray sweep. | `number` | `6` |
| `thickness` | Vertical ray bleed past the panel (px). | `number` | `1` |
| `mode` | Always animating, or only on hover. | `'infinite' \| 'hover'` | `'infinite'` |
| `rays` | Rays along both edges, or just the bottom. | `'mirror' \| 'single'` | `'mirror'` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/star-border`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-star-border-color` | `light-dark(var(--wr-color-primary), #ffffff)` | `.wr-star-border` |
| `--wr-star-border-opacity` | `1` | `.wr-star-border` |
| `--wr-star-border-radius` | `20px` | `.wr-star-border` |
| `--wr-star-border-speed` | `6s` | `.wr-star-border` |

## See also

- [Border Glow](https://ngwr.dev/bits/border-glow) — A card whose border glows where the pointer is.
- [Shiny Text](https://ngwr.dev/bits/shiny-text) — Text with a light stripe sweeping across it.
- [Button](https://ngwr.dev/reference/components/button) — A button for an action or a link.
- [Card](https://ngwr.dev/reference/components/card) — A surface that groups related content.