Buttons

The <pines-button> component renders a styled action button. Use it for any clickable call-to-action — form submissions, navigation triggers, confirmation actions, or destructive operations. Choose the type and color combination that best communicates the button's purpose and relative importance in the interface.

<pines-button> Properties

Attribute Type Description
type PinesButtonTypeEnum The button style variant.
color PinesButtonColorEnum The color scheme.

<pines-shadow-button>

No configurable parameters. Child content is used as the button label.

PinesButtonTypeEnum Values

Value Description
Primary Solid filled button. Use for the main call-to-action in a given context — the action you most want the user to take, such as "Save", "Submit", or "Confirm".
Secondary Lighter filled button. Use for supporting actions that are important but secondary to the primary action on the page — such as "Save as Draft" next to a "Publish" button.
Outlined Border-only button with a transparent background. Use for cancel, back, or low-emphasis actions placed alongside a primary button to maintain a clear visual hierarchy.

PinesButtonColorEnum Values

Value Description
Neutral Default gray tone. Use for generic or low-priority actions that do not carry a specific sentiment.
Black High-contrast dark button. Use for bold primary actions in minimal or monochrome design contexts where a strong visual anchor is needed.
Blue Standard action color. Use for the default primary action, navigation triggers, or any interaction that is constructive and non-destructive.
Red Destructive action color. Use for buttons that delete, remove, or perform operations that cannot be undone — signals that the user should proceed with caution.
Green Confirmation or success color. Use for submit, approve, or complete actions where the outcome is positive.
Yellow Cautionary action color. Use for actions that have consequences the user should be aware of, but that are not immediately destructive.