Lily's - Kit

Enhanced human interfaces
& user experiences

anchor article button details flex grid input label list slider table textarea

Button native

<button/> in web development allow users to perform actions or navigate to other pages. They come in various styles to suit different needs and are effective for prompting users to take action to progress within an interface.

<button>
  <span>button</span>
</button>

— parentElement PROPS

prop	description	requires
- - outline	sets outline style	-
- - fab	changes style to look like a FAB	-

<button data-props="--outline">
  <span>button</span>
</button>

<button data-props="--outline --fab">
  <span>button</span>
</button>

— childrenElements PROPS

prop	description	purpose
- - lead	set’s as leading item	left side optical corrections
- - trail	set’s as trailing item	right side optical corrections

<button data-props="--outline">
  <icon data-props="--lead">
    add_circle
  </icon>
  <span>button</span>
</button>

<button data-props="--outline">
  <span>button</span>
  <icon data-props="--trail">
    add_circle
  </icon>
</button>