Brand Switcher
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { BrandSwitcher } from "@corew500/ui/brand-switcher"
<BrandSwitcher>Content</BrandSwitcher>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | BrandOption[] | [ { value: "default", label: "Default" }, { value: "kilalo", label: "Kilalo" }, ] | Custom brand options (overrides defaults) |
| showLabel | enum | false | Show brand label in trigger button |
| ariaLabel | string | Select brand theme | Accessible label for screen readers |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| variant | enum | ghost | — |
| size | enum | icon | — |
| animated | enum | true | Enable hover scale and active press micro-interactions. Uses motion-safe media query to respect user preferences. |
| loading | enum | false | Show loading spinner and disable the button. When true, replaces iconStart with a spinner and sets aria-busy. |
| iconStart | enum | — | Icon to display at the start (left) of the button text. Automatically hidden when loading is true. |
| iconEnd | enum | — | Icon to display at the end (right) of the button text. Remains visible during loading state. |
| fullWidth | enum | false | Make the button expand to fill its container width. |
| glow | enum | false | Enable animated gradient glow effect on hover. Adds decorative gradient lines below the button. |
| focusableWhenDisabled | enum | false | Whether the button should be focusable when disabled. |
| nativeButton | enum | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`). |
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Accessibility
Keyboard Navigation
- Keyboard navigable via standard dropdown menu patterns
Screen Readers
- - Button has aria-label for screen reader announcement
Additional
- Current selection indicated with checkmark icon
Localization
Translatable Content
- - Labels can be customized via the options prop for i18n
- ariaLabel prop should be localized