Skip to content

Latest commit

 

History

History
172 lines (150 loc) · 5.02 KB

README.md

File metadata and controls

172 lines (150 loc) · 5.02 KB

Filled Button

Preview

A filled button is a container with text + optional icons inside of it. Read more here.

Constructors

new

This function is a native constructor, with verbosity allowing for control over every configurable property at the cost of a less convenient calling.

Parameters

  • onClick: () -> () = This function is called on click.
  • text: string
  • icon: ImageData?
  • textColor: Color3
  • surfaceColor: Color3
  • disabledTextColor: Color3
  • disabledSurfaceColor: Color3
  • isEnabled: boolean
  • elevation: number
  • schemeType: Enums.SchemeType
  • fontData: FontData
  • scale: number

Usage

No Framework

local onClick: () -> () = function() end -- calls function on click
local text: string = "Button"
local icon: ImageData? = nil
local textColor: Color3 = Color3.new()
local surfaceColor: Color3 = Color3.new()
local disabledTextColor: Color3 = Color3.new()
local disabledSurfaceColor: Color3 = Color3.new()
local isEnabled: boolean = true
local elevation: number = 0
local schemeType: Enums.SchemeType = Enums.SchemeType.Light
local fontData: FontData = Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14)
local scale: number = 1

local filledButton = Synthetic.Component.Button.FilledButton.Wrapper.new()
filledButton.OnClick = onClick
filledButton.Text = text
filledButton.Icon = icon
filledButton.TextColor = textColor
filledButton.SurfaceColor = surfaceColor
filledButton.DisabledTextColor = disabledTextColor
filledButton.DisabledSurfaceColor = disabledSurfaceColor
filledButton.IsEnabled = isEnabled
filledButton.Elevation = elevation
filledButton.SchemeType = schemeType
filledButton.FontData = fontData
filledButton.Scale = scale

Fusion

local onClickState: Fusion.Value<() -> ()> = Value(function() end) -- calls function on click
local text: string = "Button"
local iconState: Fusion.Value<ImageData?> = Value(nil)
local textColor: Color3 = Color3.new()
local surfaceColorState: Fusion.Value<Color3> = Value(Color3.new())
local disabledTextColor: Color3 = Color3.new()
local disabledSurfaceColorState: Fusion.Value<Color3> = Value(Color3.new())
local isEnabled: boolean = true
local elevationState: Fusion.Value<number> = Value(0)
local schemeType: Enums.SchemeType = Enums.SchemeType.Light
local fontDataState: Fusion.Value<FontData> = Value(Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14))
local scale: number = 1

local filledButton: GuiObject = Synthetic.Component.Button.FilledButton.Fusion.new(
	onClickState,
	text,
	iconState,
	textColor,
	surfaceColorState,
	disabledTextColor,
	disabledSurfaceColorState,
	isEnabled,
	elevationState,
	schemeType,
	fontDataState,
	scale
)

Roact

local filledButton = Roact.createElement(Module.Roact.New, {
	onClick = function() end, -- calls function on click
	text = "Button",
	icon = nil,
	textColor = Color3.new(),
	surfaceColor = Color3.new(),
	disabledTextColor = Color3.new(),
	disabledSurfaceColor = Color3.new(),
	isEnabled = true,
	elevation = 0,
	schemeType = Enums.SchemeType.Light,
	fontData = Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14),
	scale = 1,
})

Roact.mount(filledButton, parent)

primary / secondary / tertiary / primaryContainer / secondaryContainer / tertiaryContainer

This function is a style constructor, utilizing the "Style" type to reduce the number of parameters required for implementation.

Parameters

  • style: Style
  • onClick: () -> () = This function is called on click.
  • text: string
  • icon: ImageData?
  • elevation: number
  • isEnabled: boolean

Usage

No Framework

local style: Style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7))
local onClick: () -> () = function() end -- calls function on click
local text: string = "Button"
local icon: ImageData? = nil
local elevation: number = 0
local isEnabled: boolean = true

local filledButton = Synthetic.Component.Button.FilledButton.Wrapper.primary()
filledButton.Style = style
filledButton.OnClick = onClick
filledButton.Text = text
filledButton.Icon = icon
filledButton.Elevation = elevation
filledButton.IsEnabled = isEnabled

Fusion

local styleState: Fusion.Value<Style> = Value(Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)))
local onClick: () -> () = function() end -- calls function on click
local textState: Fusion.Value<string> = Value("Button")
local icon: ImageData? = nil
local elevationState: Fusion.Value<number> = Value(0)
local isEnabled: boolean = true

local filledButton: GuiObject = Synthetic.Component.Button.FilledButton.Fusion.primary(
	styleState,
	onClick,
	textState,
	icon,
	elevationState,
	isEnabled
)

Roact

local filledButton = Roact.createElement(Module.Roact.Primary, {
	style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)),
	onClick = function() end, -- calls function on click
	text = "Button",
	icon = nil,
	elevation = 0,
	isEnabled = true,
})

Roact.mount(filledButton, parent)