Button es uno de los componentes que se utilizan habitualmente en SwiftUI. Usamos botones para permitir a los usuarios producir acciones. Por eso es tan esencial generalizar la apariencia de los botones en nuestras aplicaciones.
Botones por defecto
Se puede usar dos formas de iniciarlizar botones en SwiftUI, la manera más compacta
Button("Crick Me!") {
print("tap btn")
}
y la manera que permite más personalización
Button(action: {
print("tap btn")
}, label: {
Text("Crick Me!")
})
Ambos códigos mostarán el siguiente botón

Botones por defecto
Con el modificador buttonStyle se puede modificar la apariencia del botón, SwifUI ofrece los por defecto, PlainButtonStyle, BorderlessButtonStyle, DefaultButtonStyle
Button("plain", action: {
print("click")
}).buttonStyle(PlainButtonStyle())
Button("Borderless", action: {
print("click")
}).buttonStyle(BorderlessButtonStyle())
Button("Default", action: {
print("click")
}).buttonStyle(DefaultButtonStyle())

Botón sólido
Más parámetros par usar en buttonStyle y crear variedad de botones
Button("Bordered", action: {
print("click")
}).buttonStyle(.bordered)

Definir el tamaño del botón
Para modificar su tamaño se puede usar el modificador controlSize que permite 3 estados small regular y large, se visualiza de diferente forma
Button("large", action: {
print("click")
}).buttonStyle(.bordered)
.controlSize(.large)
Button("regular", action: {
print("click")
}).buttonStyle(.bordered)
.controlSize(.regular)
Button("small", action: {
print("click")
}).buttonStyle(.bordered)
.controlSize(.small)

Con forma de capsula se usará el modificador clipShape
Button("Capsule", action: {
print("click")
}).buttonStyle(.bordered)
.clipShape(Capsule())

Botón sólido colorido
Si se quiere mostar un botón sólido y coloreado se usa borderedProminent
Button("bordered prominent", action: {
print("click")
}).buttonStyle(.borderedProminent)
Button("large", action: {
print("click")
}).buttonStyle(.borderedProminent)
.controlSize(.large)
Button("regular", action: {
print("click")
}).buttonStyle(.borderedProminent)
.controlSize(.regular)
Button("small", action: {
print("click")
}).buttonStyle(.borderedProminent)
.controlSize(.small)

Con forma de capsula se usará el modificador clipShape
Button("Capsule", action: {
print("click")
}).buttonStyle(.borderedProminent)
.clipShape(Capsule())

Para cambiar su color se puede usar el modificador tint y a continuación el color
Button("Vamos", action: {
print("click")
}).buttonStyle(.borderedProminent)
.tint(.green)

Roles en los botones
Puede proporcionar una función de botón opcional. De forma predeterminada, no especifica ningúno, se puede establecer el rol predefinido proporcionado por ButtonRole enum. Los valores pueden ser destructive o cancel, dependiendo lo establecido se mostará un botón azul para cancelación o rojo para los destructivos.
Button("Delete", role: .destructive) {
print("deleting...")
}
Button("Delete", role: .destructive) {
print("deleting...")
}.buttonStyle(.bordered)
Button("Delete", role: .destructive) {
print("deleting...")
}.buttonStyle(.borderedProminent)
Button("Delete", role: .destructive) {
print("deleting...")
}.buttonStyle(.borderedProminent)
.controlSize(.small)

Button("Cancel", role: .cancel) {
print("deleting...")
}
Button("Cancel", role: .cancel) {
print("deleting...")
}.buttonStyle(.bordered)
Button("Cancel", role: .cancel) {
print("deleting...")
}.buttonStyle(.borderedProminent)
Button("Cancel", role: .cancel) {
print("deleting...")
}.buttonStyle(.borderedProminent)
.controlSize(.small)

Botón con un bordeado colorido
Añadir un borde fino y redondeado al botón
Button(action: {
print("click btn")
}) {
Text("Home").padding(10)
.overlay(
RoundedRectangle(cornerRadius: 10.0)
.stroke(lineWidth: 2.0)
)
}

Si lo queremos con forma de capsula
Button(action: {
print("click btn")
}) {
Text("Home").padding(10)
.overlay(
Capsule().stroke(lineWidth: 2)
)
}

Botones con icono
Si se requiere añadir un icono al botón
Button(action: {
print("click btn")
}) {
HStack() {
Image(systemName: "paperplane.fill")
Text("Send")
}
}
Button(action: {
print("click btn")
}) {
HStack() {
Image(systemName: "paperplane.fill")
Text("Send")
}
}.buttonStyle(.bordered)
Button(action: {
print("click")
}){
HStack() {
Image(systemName: "paperplane.fill")
Text("Send")
}.padding(2)
}.buttonStyle(.borderedProminent)
.clipShape(Capsule())
Button(action: {
print("click btn")
}) {
HStack() {
Image(systemName: "bookmark.fill")
Text("Bookmark")
}.padding(8.0)
.overlay(
RoundedRectangle(cornerRadius: 10.0)
.stroke(lineWidth: 2.0)
)
}
Button(action: {
print("click btn")
}) {
HStack() {
Image(systemName: "bookmark.fill")
Text("Bookmark")
}.padding(8.0)
.overlay(
Capsule().stroke(lineWidth: 2)
)
}
Button(role: .destructive, action: {
print("click delete")
}) {
HStack() {
Image(systemName: "trash.fill")
Text("Delete")
}
}.buttonStyle(.borderedProminent)
Button(role: .destructive, action: {
print("click delete")
}){
HStack() {
Image(systemName: "trash.fill")
Text("Delete")
}.padding(2)
}.buttonStyle(.borderedProminent)
.clipShape(Capsule())
Button(role: .destructive, action: {
print("click delete")
}) {
HStack() {
Image(systemName: "trash.fill")
Text("Delete")
}.padding(8.0)
.overlay(
RoundedRectangle(cornerRadius: 10.0)
.stroke(lineWidth: 2.0)
)
}
