Button

Source API

The Button component in Punica CSS Framework is a versatile element designed for triggering actions or navigating users. It supports various styles, sizes, and states, allowing seamless customization to suit different use cases. To apply this component, add the .button class to an a or button element.

Default

Active

Disabled

Inactive

Preloader

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Outlined

Active

Disabled

Inactive

Rounded

Add the .tiny, .mini, .small, .large or .huge class to a button to make it smaller or larger. Also, you can add the .block class for a full-width button.

Tiny Mini Small Default Large Huge

Block Button

To create a button group, add the .buttons class to a div element around the buttons.

Button

person

254

thumb_up

276

edit clear

lock

shopping_cart

$175

Checkout Now !

keyboard_arrow_left 1 2 3 ... 56 57 58 keyboard_arrow_right

Also, add the .tiny, .mini, .small, .large or .huge class to .buttons to make it smaller or larger group buttons.

Mini

Large

And you can add the .block class to .buttons for a full-width button group.

Button Button Button

A button can be used to trigger a dropdown menu.

Dropdown

drafts Mini

254

drafts

254

drafts

You can change the direction of the dropdown by adding any .right .left .top .top.left .top.right .bottom.left .bottom.right classes to .dropdown container.

Also, just add the .vertical class to .buttons to make it vertical button group.

Props
Default Class Name	Combinators
`buttons`	`.buttons`
`button`	`.button` `.buttons > .button`
Styles	Combinators
`primary`	`.primary.button` `.primary.buttons`
`success`	`.success.button` `.success.buttons`
`warning`	`.warning.button` `.warning.buttons`
`error`	`.error.button` `.error.buttons`
`dark`	`.dark.button` `.dark.buttons`
`outlined`	`.outlined.button`
Sizes	Combinators
`tiny`	`.tiny.button` `.tiny.buttons`
`mini`	`.mini.button` `.mini.buttons`
`small`	`.small.button` `.small.buttons`
`large`	`.large.button` `.large.buttons`
`huge`	`.huge.button` `.huge.buttons`
States	Combinators
`active`	`.active.button`
`inactive`	`.inactive.button`
`disabled`	`.disabled.button`
`block`	`.block.button` `.block.buttons`
`vertical`	`.vertical.buttons`
`preloader`	`.preloader.button`
Dropdown	Combinators
`dropdown`	`.dropdown` `.buttons > dropdown`
`right`	`.right.dropdown`
`left`	`.left.dropdown`
`top`	`.top.dropdown`
`bottom`	`.bottom.dropdown`
`toggle`	`.dropdown > .button.toggle`
`clickable`	`.clickable.dropdown`