CloseButton

Solidtype_heroui.Close_button is Kobalte’s Button.Root, a native <button> named “Close”, with the classes HeroUI’s own closeButtonVariants gives, HeroUI’s cross, and the state its styles read, declared as React Aria writes it.

Usage

close_button_usage.mlx

module Close_button = Solidtype_heroui.Close_button

let make () = <Close_button />

Examples

Interactive

Clicked: 0 times

close_button_interactive.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Close_button = Solidtype_heroui.Close_button

let make () =
  let count, set_count = S.create_signal 0 in
  let times () = string_of_int (S.get count) ^ " times" in
  <div class_="flex flex-col items-center justify-center gap-4">
    <Close_button
      aria_label=(fun () -> "Close (clicked " ^ times () ^ ")")
      on_click=(fun _ -> S.set set_count (S.get count + 1))
    />
    <span class_="text-sm text-muted">
      (fun () -> Jsx.string ("Clicked: " ^ times ()))
    </span>
  </div>

With Custom Icon

Its children take the place of HeroUI’s cross.

Custom Icon

Alternative Icon

close_button_custom_icon.mlx

module Close_button = Solidtype_heroui.Close_button

let make () =
  <div class_="flex items-center gap-4">
    <div class_="flex flex-col items-center gap-2">
      <Close_button><Icons.Circle_xmark /></Close_button>
      <span class_="text-xs text-muted">"Custom Icon"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Close_button><Icons.Xmark /></Close_button>
      <span class_="text-xs text-muted">"Alternative Icon"</span>
    </div>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

close_button_tailwind.mlx

module Close_button = Solidtype_heroui.Close_button

let make () =
  <Close_button
    aria_label="Close"
    class_="size-8 rounded-full bg-default text-muted hover:bg-default-hover \
            hover:text-foreground active:scale-95"
  />

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every close button, as with HeroUI in React:

@layer components {
  .close-button {
    @apply bg-red-100 text-red-800 hover:bg-red-200;
  }

  .close-button--custom {
    @apply rounded-full border-2 border-red-300;
  }
}

Styling Reference

CSS Classes

• .close-button, and its variant .close-button--default

Interactive States

HeroUI’s styles read a pseudo-class or a data attribute for each; the port declares each attribute as React Aria writes it, kept by Solidtype_heroui.Interaction, as Button’s are:

• Hover: :hover or [data-hovered="true"]
• Pressed: :active or [data-pressed="true"]
• Focus: :focus-visible or [data-focus-visible="true"]
• Disabled: :disabled or [data-disabled="true"]

API Reference

Each prop beside the name HeroUI’s React component gives it.

CloseButton

React	solidtype	Type	Default	Description
variant	variant	[ `default ]	`default	Visual style
isDisabled	is_disabled	bool	false	Whether it is disabled
aria-label	aria_label	string	"Close"	Its name
onPress	on_click	Dom.mouseEvent -> unit		Kobalte’s click, by mouse, touch or keyboard, where React Aria’s is a press
className	class_	string		Added after HeroUI’s classes
children	children	elements	HeroUI’s cross	Its icon
render props	—			Not yet

Beside React

Original HeroUI documentation: CloseButton.

The same HeroUI CloseButton twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two elements: a marked row is one they disagree on, and a dimmed row is a framework’s own – Solid’s hydration key, React Aria’s markers and the id it generates – which no style reads. Hover, focus and press them to see the state each sets.

disabled

solidtype — OCaml, on Solid and Kobalte

React — TypeScript, on React Aria

attribute	solidtype	React