Button
Buttons trigger actions or navigation. They support variants, sizes, outline and loading states, optional icons, link styling, and destructive emphasis.
Loading Code Block...Pass onClick (and other DOM props) on <Button> when you need imperative handlers; with href, the component renders an anchor.
Use @click on <Button> or listen for the click emit. With href, the component renders a link.
Default
Section titled “Default”Standard configuration: variant="default", size="md", and a text label.
Loading Code Block...Sizes: xs, sm, md, lg, xl. Use the dropdown to switch size; the snippet updates to match.
Loading Code Block...Variants
Section titled “Variants”variant controls visual style: default, secondary, ghost, or link.
Loading Code Block...Outline
Section titled “Outline”Set isOutline for a bordered, transparent background on any variant.
Loading Code Block...Disabled
Section titled “Disabled”disabled blocks interaction and applies muted styles.
Loading Code Block...Loading
Section titled “Loading”loading shows a spinner and disables the button. Use loadingText for alternate copy while loading, and hideloadingSpinner to keep the loading state without the spinner.
In templates, bind the prop in camelCase (:hideloadingSpinner) or kebab-case (:hideloading-spinner), matching your SFC style.
Loading Code Block...Pass a ReactNode to icon. Set iconPosition to left or right. Icons typically come from @hubtel/react-icons.
Use the #icon-left and #icon-right slots with icons from @hubtel/vue-icons, and set iconPosition to match.
Loading Code Block...Full width
Section titled “Full width”fullWidth stretches the button to the container width.
Loading Code Block...Destructive
Section titled “Destructive”destructive applies danger styling (for delete or irreversible actions).
Loading Code Block...Link underline
Section titled “Link underline”underline adds a hover underline; it is intended for variant="link".
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| variant | 'default' | 'default' | 'secondary' | 'ghost' | 'link' | Visual style variant. |
| size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Button size (padding and typography). |
| text | - | string | Label text. |
| disabled | false | boolean | Disables interaction. |
| isOutline | false | boolean | Outlined style (transparent fill, visible border). |
| icon | - | ReactNode | Pre-rendered icon element (e.g. `icon={<PlusIcon />}`). Combined with `iconPosition` to place left or right of the label. |
| iconPosition | 'left' | 'left' | 'right' | Icon position relative to the label. |
| fullWidth | false | boolean | Full width of the parent container. |
| loading | false | boolean | Loading state; shows spinner unless hidden. |
| loadingText | - | string | Optional text while loading; falls back to `text`. |
| hideloadingSpinner | false | boolean | Hide the spinner while `loading` remains true (prop name is `hideloadingSpinner` in source). |
| destructive | false | boolean | Danger / destructive emphasis. |
| fontCase | 'uppercase' | 'uppercase' | 'sentence' | Casing for the label. |
| underline | false | boolean | Hover underline; use with `variant="link"`. |
| href | - | string | If set, the component switches from `<button>` to a link element. React always renders `<a href>`. Vue renders `<router-link :to>` for internal paths and `<a href>` for external URLs (so `vue-router` must be installed). Disabled / loading links suppress click handling in both frameworks. |
| onClick | - | () => void | React: `onClick` prop. Vue: emitted as `click` — bind with `@click="handler"`. |
Accessibility
Section titled “Accessibility”- Use a native
buttonfor actions andhrefonly when navigating (the component switches to a link whenhrefis set). - Expose a clear accessible name via
textor associated content; for icon-only usage, providearia-labelthrough underlying button props where supported. - Do not rely on colour alone for destructive actions; pair
destructivewith explicit copy.