actions component

IconButton

Reusable icon button component.

@wrnexus/ui 0.2.675 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<IconButton
  label="Action"
  icon="•"
  variant="ghost"
  disabled="false"
/>

Legacy mount name: data-component="IconButton".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`label`	`string`	Optional	`"Action"`
`icon`	`string`	Optional	`"•"`
`variant`	`string`	Optional	`"ghost"`
`disabled`	`boolean`	Optional	`false`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/IconButton.wrn

component IconButton {
  props {
    class = ""
    label = "Action"
    icon = "•"
    variant = "ghost"
    disabled = false
  }
  view {
        <button type="button" aria-label="{label}" title="{label}" disabled="{disabled}" class="inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'} {class}">
        <span aria-hidden="true">{icon}</span>
        </button>
    }
}